在JQuery中鼠标hover和鼠标移动时停止和继续动画的方法

例如：

一个简单的例子来解释：

$('.moveDiv').animate({ "margin-left": 2000 }, 20000, 'linear'); 

moveDiv element在加载时会向左移动，现在，当mouse move over到moveDiv element ，我希望它停止并在mouse move out时继续mouse move out ！

有任何想法吗？

我在stackoverflow的这个问题中找到了这个代码，所以，我只是想修改代码，使鼠标hover时可以停止并继续动画!!

代码的演示

Answer 1

暂停/恢复动画插件

  $(document).ready(function () { $(".moveDiv") .mouseover(function () { $(this).pauseAnimation(); }) .mouseout(function () { $(this).resumeAnimation(); }) .startAnimation({ "margin-left": 2000 }, 20000, 'linear'); }); 

Answer 2

尝试：

 $('.moveDiv') .animate({ "margin-left": 2000 }, 20000, 'linear') .hover(function(){ $(this).stop(true,false); }, function(){ $(this).animate({ "margin-left": 2000 }, 20000, 'linear') }); 

让我知道你是怎么办的…

oops .stop（true，false）;

Answer 3

刚刚在EBCEu4的解决方案中找到了该插件 – 使用该插件但是可重复使用的解决方案将是：

 var duration = 5000; var target = 200; $('.moveDiv') .animate({ "margin-left": target }, duration, 'linear') .hover( function(){ $(this).stop(true,false); }, function(){ var $this = $(this); var cur = parseInt($this.css('margin-left')); $this.animate({ "margin-left": target }, duration*((target-cur)/target), 'linear') });