38-讨论

8.9.3　讨论

1．示例

我将展示一个变动CSS属性 opacity 的动画示例，但是它对任何其他属性的做法也一样：

jQuery('#something').hover(
　　 function(){
　　　　　jQuery(this).stop().animate({opacity:1}, 1000);
　　 },
　　 function(){
　　　　　jQuery(this).stop().animate({opacity:0.8}, 1000);
　　 }
);

上述代码中的方法对自定义jQuery动画如 slideUp() 、 slideDown() 、 fadeIn() 等也有效。

这是使用淡入/淡出方法的例子：

jQuery('#something').hover(
　　 function(){
　　　　　jQuery(this).stop().fadeTo( 1, 1000 );
　　 },
　　 function(){
　　　　　jQuery(this).stop().fadeTo( 0.8, 1000 );
　　 }
);

2．还没结束

在这样的情况下还可能发生另一个相关问题：

jQuery('#something').hover(
　　 function(){
　　　　　jQuery(this).stop()
　　　　　　　 .fadeTo( 1, 1000 )
　　　　　　　　.animate( {height:500}, 1000 );
　　 },
　　 function(){
　　　　　jQuery(this).stop()
　　　　　　　 .fadeTo( 0.8, 1000 )
　　　　　　　 .animate( {height:200}, 1000 );
　　 }
);

如果你尝试这段代码，快速移动鼠标，元素将再次疯狂地变化，但是只有高度（而不是透明度）发生变化。

原因很简单：jQuery动画默认情况下要进行排队。这意味着如果添加多个动画，它们会按照顺序执行。

在默认情况下， stop() 只停止（和删除）当前动画。在上一个例子中，每次都只删除不透明度动画，而将高度动画留在队列中运行。

为了解决这个问题，必须多次调用 stop() 或者传递 true 作为第一个参数。这会使 stop() 清除所有排队的动画。鼠标悬停代码应该是这样的：

jQuery('#something').hover(
　　 function(){
　　　　　jQuery(this).stop(true)
　　　　　　　 .fadeTo( 1, 1000 )
　　　　　　　 .animate( {height:500}, 1000 );
　　 },
　　 function(){
　　　　　jQuery(this).stop(true)
　　　　　　　 .fadeTo( 0.8, 1000 )
　　　　　　　 .animate( {height:200}, 1000 );
　　 }
);