jQuery淡入淡出效果 jQuery淡入淡出效果

如果是通过鼠标点击事件来触发动画效果
可以使用

$("#button").click(function(){ $("#div").stop().fadeToggle("slow"); });

$.stop()可以防止点击过快时，元素会呈现与点击次数相关的淡入淡出动画循环
如果是通过鼠标的移入移出来触发动画效果
可以使用

$("#div1").hover( function(){ $("div2").stop().fadeTo("slow",1,function(){ $(this).css("display", "block"); }) }, function(){ $("div2").stop().fadeTo("slow",0,function(){ $(this).css("display", none); }) } );

之所以用hover而不是用mouseout mouseover，因为当时的情况是需要鼠标进入元素时，触发淡入效果，悬停时，一直呈现元素的淡入状态，而从悬停状态转到移出状态时，才执行淡出动画。
而且，如果元素内包含多个子元素，类似于

"div1"> "div2"> "div3">

对于div1绑定mouseout mouseover事件，如果鼠标在div2和div3之间移动时，就会出现多次淡入淡出动画效果
而用hover就可以实现我们想要的效果
在执行的回调函数中添加改变元素的样式，是因为，在淡出效果结束后，虽然看不见了，但是元素依旧在那里，此时鼠标移入时，仍然会触发淡入动画，这显然也不是我们想要的，所以，在动画结束后，让他none
【jQuery淡入淡出效果】