계속 div 메뉴 애니메이션이 튀어 오름

Question

끊임없이 스크롤되는 "메뉴"를 만들려고합니다. 코드가 작동하지만 스크롤 애니메이션이 고르지 않습니다. 메뉴 스크롤을 부드럽게하려면 어떻게합니까? 전에 animate()를 사용했고이 문제가 없었습니다.

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

자바 스크립트 코드 :

$(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