暫停滾動懸停

我正在爲一個滾動div設置動畫，並且已經能夠觸發點火，滾動，並在點擊和/或鼠標停止時停止。現在，當鼠標懸停在div而不是停止時，我想讓它暫停。我是一個總jquery newb，所以我真的不知道什麼會工作，什麼不會。這是我的代碼到目前爲止，它工作正常。暫停滾動懸停

$(document).ready(function() { 
    var sL = 4000; 
    $('.scrolls').animate({ 
     scrollLeft : sL 
    },100000, 'linear'); 

    $(".scrolls").on("click",function(){ 
     $(this).stop(true,false); 
    }); 

})

任何幫助都非常讚賞！

謝謝！

http://jsfiddle.net/BMb65/9/

來源

2014-03-05 user3158649

查找到'queue'和'dequeue'在jQuery的文檔 –

謝謝！我已經研究過它，但還沒有弄清楚如何把它放在一起。它似乎應該很容易，但是當然...我可以簡單地與.dequeue交換.stop還是必須完全重新配置代碼？這是一個jsfiddle http://jsfiddle.net/BMb65/9/ – user3158649

我爲您的代碼編寫了一個修改後的版本，可根據需要進行工作。請回顧下面我的答案.. –

這應該工作：

$(document).ready(function() { 
    var $div = $('.scrolls'); 
    var sL = 4000; 
    var startTime = new Date().valueOf(); 
    var timePassed; 
    var stopped = false; 
    //animate: 
    $div.animate({ 
     scrollLeft : sL 
    },100000, 'linear'); 

    //on click, stop animation: 
    $div.on("click",function(){ 
     $div.stop(true,false); 
     stopped = true; 
    }); 

    //on mouseover -> stop animation (pause) 
    //on mouseout -> resume animation (actually a new animation 
    $div.hover(function() { //mouseenter 
     $div.stop(true, false); 
     timePassed = (new Date()).valueOf() - startTime; 
    }, function() { //mouseleave 
     if (!stopped) { //resume only if it was stopped on mouse enter, not on click 
      $div.animate({ 
       scrollLeft : sL 
      }, 100000 - timePassed, 'linear'); 
     } 
    }); 
});

有了這個代碼，當你將鼠標懸停在DIV，動畫停止。我們記錄自啓動以來經過了多少時間，因此我們可以創建一個新動畫，通過將其持續時間設置爲原來的持續時間減去已經過去的時間來模擬恢復舊動畫。

希望這會有所幫助。

來源

2014-03-05 20:04:27

我已經更新你的小提琴工作解決方案：http://jsfiddle.net/BMb65/10/ –

這工作完美！謝謝！ – user3158649

很高興能有所幫助。請標記答案是正確的。 –

爲什麼不使用的mouseenter和鼠標離開事件..

請檢查此琴指出： Modified Code

基本上，你會做這樣的事情：

$(".scrolls").on("mouseenter",function(){ 
    $(this).stop(true,false); 
}); 

$(".scrolls").on("mouseleave",function(){ 
    $(this).animate({ 
    scrollLeft : sL 
    },100000, 'linear'); 
});

來源

2014-03-05 20:07:43

請看看這個小提琴http://jsfiddle.net/93Ta8/

我所做的只是利用

$(".scrolls").on("mouseenter"

和

$(".scrolls").on("mouseleave"

來源

2014-03-05 21:10:05

暫停滾動懸停

回答

相關問題