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)

The above code is from opaque to transparent and vice versa. Just change some values ​​

3.Chrome
The simplest
css is defined like this:
-webkit-transition-duration:.2s;
opacity:0;

You control opacity in JS .For example, if you change the opacity:1 of the object you defined in CSS above, it will automatically have animation effects. left, top, etc. can all take effect.

Please correct me if there are any typos.