hover上的Jquery Animate

我有一个文本，我想动画当鼠标在它上面时，例如：

$(".tabb tr").hover( function(){ $(this).find("td #headie").animate({marginLeft:'9px'},'slow') }, function() { $(this).find("td #headie").animate({marginLeft:'0px'},'slow') }); 

有了这个..当鼠标hover在行上时…表格列通过移动动画小动画。

这里的问题是：当我在这些行上重复移动鼠标光标然后停止并看到..即使没有将鼠标移到它上面，动画也会持续一段时间。 以后它会继续推动自己的发展

我怎么能阻止它？

Answer 1

我发现，关于hover的平滑jquery动画的一篇非常好的文章是由Chris Coyier撰写的关于CSS技巧的文章：

http://css-tricks.com/full-jquery-animations/

所以这适合你的代码看起来像这样：

 $(".tabb tr").hover( function(){ $(this).filter(':not(:animated)').animate({ marginLeft:'9px' },'slow'); // This only fires if the row is not undergoing an animation when you mouseover it }, function() { $(this).animate({ marginLeft:'0px' },'slow'); }); 

本质上它会检查行是否正在动画，如果不是动画，那么它才会调用mouseenter动画。

希望您的行现在有点像本页面上的最后两个示例：

http://css-tricks.com/examples/jQueryStop/

Answer 2

我按照我想要的方式得到它……以下是我做的变化“animate（{marginLeft：’0px’}，0）”

检查下面的代码..

 $(document).ready(function(){ $(".tabb tr").mouseover(function(){ $(this).find("td #headie").animate({marginLeft:'9px'},'fast') }); $(".tabb tr").mouseout(function(){ $(this).find("td #headie").animate({marginLeft:'0px'},0) }); }); 

Answer 3

听起来你想要绑定到mousemove而不是hover，但也为mouseout创建一个处理程序，如$(foo).mouseout(function(){$(this).stop();})来终止动画。

Answer 4

jQuery为您的需求提供特殊的eventHandlers :)使用mouseenter和mouseleave

 $(".tabb tr").mouseenter( function(){ $(this).find("td #headie").animate({marginLeft:'9px'},'slow') }); $(".tabb tr").mouseleave( function() { $(this).find("td #headie").animate({marginLeft:'0px'},'slow') });