停止和繼續動畫，同時鼠標懸停和鼠標移開在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中

回答

相關問題