停止和继续动画，同时鼠标悬停和鼠标移开在JQuery中

一个简单的例子来解释：

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

的moveDiv element将移动，当它被加载，现在到了离开的时候， mouse move over的moveDiv element，我希望它停下来，并继续移动时，mouse move out！

任何想法？

我在这个question of stackoverflow中发现了这段代码，所以我只是想修改代码使它停止并在鼠标悬停时继续动画！

the demo of the code

来源

2011-02-23 qinHaiXiang

Pause/Resume Animation Plugin

$(document).ready(function() { 

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

    });

来源

2011-02-23 09:22:18

插件工作完美！ – qinHaiXiang 2011-02-23 10:32:55

该链接似乎打破了我，我发现这个http://tobia.github.io/Pause/ – mhesabi 2014-02-11 07:01:01

尝试：

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

让我知道你上车......

哎呀.stop（true和false）;

来源

2011-02-23 09:12:30

它的工作原理too.But动画会很慢在几十个盘旋之后下来！真的非常可怜 – qinHaiXiang 2011-02-23 10:39:50

是刚刚玩 - 它的原因是一旦最初的动画开始它将移动2000px超过20秒。暂停，然后再开始动画说1000px - 所以现在的动画有一半的距离在同一时间... – 2011-02-23 11:04:55

刚刚发现在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') 
    });

来源

2011-02-23 11:06:48

停止和继续动画，同时鼠标悬停和鼠标移开在JQuery中

回答

相关问题