連續滾動div菜單動畫jumpy

Question

我正在嘗試創建一個將不斷滾動的「菜單」。我有代碼工作，但滾動動畫非常波濤洶涌。如何讓菜單滾動更流暢？我之前使用過animate（），從來沒有遇到過這個問題。

jsFidde：https://jsfiddle.net/pwa0sp75/

JavaScript代碼：

$(document).ready(function() { 
      var currentSpeed = parseInt($("#scrollSpeed").val()); 
      setInterval('scroll()', currentSpeed); 
     }); 

function scroll(){ 
     var scrollSpeed = parseInt($("#scrollSpeed").val());  
     $("#scrollup .divTableBody").animate({ top: '-=' + $('#scrollup .divTableBody .divTableRow:last').height() }, scrollSpeed, 'linear', function() { 
      var offset = $('#scrollup .divTableBody .divTableRow:last').offset().top; 
      if (offset <= 1352) { 
       $('.divTable').css("top", 0); 
       $('#scrollup .divTableBody .divTableRow:last').after($('#scrollup .divTableBody .divTableRow:first').detach()); 
      } 
     }); 
    } 

Answer 1

爲了讓您的動畫更流暢的使用Velocity.js，它使你的動畫非常流暢。您只需下載Velocity腳本文件並將其包含在您的頁面中，即可將您的代碼從.animation({...});替換爲.velocity({...});。我一直在做同樣的事情，以避免JQuery的波濤洶涌的動畫。

如果你想平滑滾動，那麼所有你需要做的是：

$("#buttonToClick").click(function() { 
     $("#toWhichDivtoScroll").velocity("scroll", 1000); 
    }); 

編輯答案

檢查，如果你有正確添加velocity.js和velocity-ui.js文件在您的頁面中正確。進行一些修改，下面的代碼並嘗試運行：

var topValue = 0; function scroll() { var scrollSpeed = parseInt($("#scrollSpeed").val()); $("#scrollup .divTableBody .divTableRow").velocity({top: topValue}, scrollSpeed, 'linear', function() { topValue += 25; var offset = $('#scrollup .divTableBody .divTableRow:last').offset().top; if(offset <= 1352) { $('.divTable').velocity("scroll", 500); $('#scrollup .divTableBody .divTableRow:last').after($('#scrollup .divTableBody .divTableRow:first').detach()); } });

播放改變top財產，甚至你的scrollSpeed和currentSpeed，因爲它們所引起的抖動現象的一部分。

要知道如何讓你的動畫與速度流暢，你可以參考這個鏈接Improving Velocity UI Animation