Бесконечная петля Smooth Vertical Javascript

Question

У меня есть структура данных HTML-таблицы, и я смог получить цикл в вертикальном списке с помощью некоторого javascript, но я не могу понять, как сделать его гладкой постоянной вертикальной прокруткой, прямо сейчас он идет 1 к 1, когда строка достигает вершины и присоединяется к себе. Даже если setInterval установлен в 0, он имеет кратковременную раздражающую паузу. Кроме того, мой фрагмент из 10, похоже, иногда не содержит список до 10, но не уверен, что это мой JavaScript или проблема с браузером.

JS

$.fn.infiniteScrollUp=function(){ 
    var self=this,kids=self.children() 
    kids.slice(10).hide() 
    setInterval(function(){ 
     kids.filter(':hidden').eq(0).slideDown() 
     kids.eq(0).slideUp(function(){ 
      $(this).appendTo(self) 
      kids=self.children() 
     }) 
    },1) 
    return this 
} 


$(function(){ 
    $('section').infiniteScrollUp() 
}) 

HTML

<table> 
    <thead> 
    <div> 
     <span>a</span> 
     <span>b</span> 
     <span>c</span> 
     <span>d</span> 
    </div> 
    </thead> 
    <section> 
    <div><span>a</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>b</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>c</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>d</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>e</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>f</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>g</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>h</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>i</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>j</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>k</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>l</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>m</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>n</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>o</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>p</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>q</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>r</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>s</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>t</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>u</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>v</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>w</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>x</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>y</span><span>2</span><span>3</span><span>4</span></div> 
    <div><span>z</span><span>2</span><span>3</span><span>4</span></div> 
    </section> 
</table> 

Вот JSFiddle

Answer 1

https://jsfiddle.net/pfpyc68e/1/

var self=this,kids=self.children() 
setInterval(function(){ 
     kids.slice(10).hide() 
    kids.filter(':hidden').eq(0).slideDown() 
    kids.eq(0).slideUp(800, "linear",function(){ 
     $(this).appendTo(self) 
     kids=self.children() 
    }) 
},1) 

Добавленные 800 миллисекунды таймера на slideUp, а затем переехал срез внутри интервала. По крайней мере, перемещение среза - это то, что вам нужно. Я не уверен, что это правильное скользящее движение, за которое вы собираетесь ...