停止jquery動畫。建立一個旋轉木馬

即時通訊學習JavaScript和jQuery和即時嘗試創建我自己的旋轉木馬。目前我偶然發現的問題如下。當用戶停止在旋轉木馬中滾動時，我有一個運行並將我的目標旋轉木馬項目居中到我想要的位置的功能。我在小提琴中用黑色線條說明了這一點。這是我的功能，該中心該項目：停止jquery動畫。建立一個旋轉木馬

jQuery.fn.CenterToPoint = function(){ 
    return this.each(function(){ 

     Offset = $(this).offset().left; 
     Width = $(this).width(); 
     Illuminate_Point = 0.45 * $(window).width(); 
     ScrollLeft = Illuminate_Point - (Offset+Width/2); 

     $Container.animate({scrollLeft: "-=" + ScrollLeft},450); 
     }); 
}

但是，即使動畫正在運行，我希望用戶能夠滾動。我如何殺死這個動畫時，它的運行，但用戶點擊，mousescroll或觸控板用於我的傳送帶？這裏是我的jFiddle： http://jsfiddle.net/ptp05jvo/

來源

2014-11-20 Andrew Nielsen

不確定你的意思。它看起來工作。順便說一句好主意，看起來非常好 – DevDonkey 2014-11-20 19:45:42

所以，當動畫運行時，如果你嘗試滾動它會變得波濤洶涌。 Theres用戶的滾動和我的動畫之間的衝突。我很想學習如何控制這樣的動畫功能，所以我可以在用戶開始滾動時取消它。謝謝你的方式！ – 2014-11-20 19:54:21

如果您調用'$ Container.stop（）'，它將停止該對象上正在運行的任何動畫。但是，簡單地將這個添加到'scroll'處理程序中會導致問題。我認爲它正在啓動動畫，稍微移動一下，然後滾動處理程序被調用並停止，然後再次啓動......等等，但我不確定這一切。 – forgivenson 2014-11-20 19:58:55

據我所知，你的問題是：

盒子是它達到期望的點（黑線）後抽搐。
當動畫（框朝黑色線移動）時，用戶輸入會導致框跳轉。在這種情況下，您希望用戶輸入覆蓋動畫滾動。

我並沒有解決整個問題，但這裏是我到目前爲止有：http://jsfiddle.net/ptp05jvo/3/

我設法阻止由.animate()加入以下選項的第一個問題（抽搐）。

always: function() { 
    clearTimeout($Container.data('scrollTimeout')); 
    isSystemScroll = false; 
}

當你.animate()動畫滾動，jQuery的滾動元件，它的視爲實際滾動，觸發所以.scroll()事件。這可能是好的/壞的。在你的輪播案例中，這樣做很糟糕，因爲你在.scroll()事件中調用了.CenterToPoint()，這意味着每當jQuery將該框設置爲中心時，就會調用它。這是導致抽搐問題的原因。在'.scroll（）'事件中不斷調用.CenterToPoint()。所以，我添加的選項將停止這一點。

爲了區分這個問題，我添加了新的jQuery函數scrollStopped來處理滾動停止的事件。

我還介紹了一個新的變量，叫做isSystemScroll。這個想法是識別滾動是來自用戶/動畫。有了這個，我們可以優先考慮用戶輸入來覆蓋動畫滾動。然而，用戶輸入可以是任何東西，鍵盤上的箭頭，鼠標滾輪滾動，鼠標點擊滾動條，等等。在我的例子，我只處理它在下面的代碼所示鍵盤上的箭頭輸入：

$(document).keyup(function() { 
    isSystemScroll = false; 
    console.log("key up"); 
});

顯然，您可以添加額外的檢查來僅捕獲左/右箭頭鍵而不是所有鍵。

這種解決第二個問題。但您仍然需要處理其他用戶輸入，尤其是鼠標移動滾動條。

從測試中，我發現Firefox使動畫更好更平滑。在Firefox中，使用鍵盤箭頭的用戶輸入將完全覆蓋動畫。兩者之間的過渡是平穩的。但是，在Chrome中，有一點點滯後/跳躍。另外，在Chrome中，水平滾動條在Firefox中不顯示，但它確實如此。

值得一提的是，Firefox不顯示抽搐問題。我無法確定這是否由您擁有的CSS引起。我沒有修改你的CSS。

我遇到了幾個傳送帶庫，並做了相同的測試，看看他們如何處理這個問題。

貓頭鷹旋轉木馬

http://owlgraphic.com/owlcarousel/demos/custom.html

只允許拖曳輸入。其他用戶輸入被禁用（滾動條，鍵盤箭頭等）。但是，如果您嘗試在動畫中拖動旋轉木馬（在Chrome瀏覽器中），則會看到相同的跳轉/延遲問題。同樣，Firefox在這個庫中顯示更好更流暢的動畫。

油滑

http://kenwheeler.github.io/slick/

在 '自動播放' 選項可以防止用戶輸入時轉盤式磁帶動畫。沒有滾動條，只能用鍵盤箭頭移動。

結論

由該長的答案一個結論，幾件事情，如果你想建立自己的旋轉木馬，你可以這樣做：

限制用戶輸入，只允許特定的輸入。
禁用滾動條。

或者，您可以使用現有的庫。

來源

2014-11-21 21:32:55 stack247

停止jquery動畫。建立一個旋轉木馬

回答

相關問題