jQuery动画：停止动画一次鼠标

我试图让div滑出并在hover时，即鼠标分别进入和离开。 然而，当我多次进出时， div一直来回滑动，基本上是我hover的次数。 请参考这个jsFiddle示例 。

正如你可能已经猜到的那样，一旦鼠标在元素之外，我希望能让div停止（即滑入），无论我多少次在它上面。 我认为我对jQuery动画的理解缺少一些东西。

 $("#state-slider").hover(function() { $(this).animate({ left: '0' }, 500); }, function() { $(this).animate({ left: "-270" }, 500); }); 

谢谢。

Answer 1

你需要jQuery .stop()函数 。 在开始新动画之前将其插入命令链中，以中断任何正在进行的动画。

 $('#state-slider').hover(function() { $(this).stop().animate({ left: 0 }, 500); }, function() { $(this).stop().animate({ left: -270 }, 500); }); 

工作jsFiddle =）

Answer 2

 $("#state-slider").hover(function() { $(this).animate({ left: '0' }, 500); }, function() { $(this).stop(true,true).animate({ left: "-270" }, 500); }); 

DEMO

http://api.jquery.com/stop/

Answer 3

有一个例子

http://jsfiddle.net/amkrtchyan/TQz5U/1/

和jquery代码

 $(function() { $("#state-slider").hover(function() { $(this).stop(true,true).animate({ left: '0' }, 500); }, function() { $(this).stop(true,true).animate({ left: "-270" }, 500); }); });