How to make the button background gradually appear and disappear_html/css_WEB-ITnose

How to make the button background gradually appear and disappear? When you put the mouse on the button on this web page www.iqztc.com, there will be a blue background. However, the blue background appears very quickly. How can it be displayed slowly and then disappear slowly when you move the mouse away? I hope the master will leave a QQ account.

Reply to the discussion (solution)

It can be achieved with jquery

JQUERY can be implemented. If it is Firefox, you can refer to keyframes in CSS3

You should be talking about animation

Three ways I know
1. IE
Use filter filter:ahpha(opacity:value); value: can be 1 ,2,3....100
2.FF
opacity attribute; opacity:value can be 0,0.1,0.2....1

The above two are just added to the picture Transparency: To achieve something from scratch or from something to nothing, you need to write a function yourself

var value = 100;var oImg = document.getElementsByTagName("img")[0];oImg .opacityVlaue = 0;if(oImg .iTimer) clearInterval(oImg.iTimer);oImg.iTimer = setInterval(function(){  if(oImg .opacityVlaue < 100) {  oImg .opacityVlaue += 10;  oImg.style["filter"] = "alpha(opacity:"+oImg .opacityVlaue+")";  oImg.style["opacity"] = oImg .opacityVlaue/ 100;  }else{  clearInterval(oImg.iTimer);  oImg.iTimer = 0;  oImg .opacityVlaue = 100;  oImg.style["filter"] = "alpha(opacity:"+oImg .opacityVlaue+")";  oImg.style["opacity"] = oImg .opacityVlaue/ 100; }} , 30)