连续滚动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