防止「跳」垂直自動滾動和循環垂直自動滾動

我的垂直自動滾動，似乎在某些點停止不正常，我想有一個平滑滾動代替。其次，我想垂直滾動自動重置（幾乎無限循環或給它的含義永不止步，而不是跳躍）。我將如何去完成這件事？這是我的代碼到目前爲止：http://jsfiddle.net/8KjX8/78/。防止「跳」垂直自動滾動和循環垂直自動滾動

HTML

<div id="wrapper"> 
<ul> 
    <li><div id='activity_date'>06/11/2012</div></li> 
    <li><div id='activity_date'>06/11/2012</div></li> 
    <li><div id='activity_date'>06/11/2012</div></li> 
    <li><div id='activity_date'>06/11/2012</div></li> 
    <li><div id='activity_date'>06/11/2012</div></li> 
    <li><div id='activity_date'>06/11/2012</div></li> 
</ul> 
</div>

CSS

#activity_date { 
    background-color: #cc0066; 
    color: #FFF; 
    width: 80px; 
} 
#wrapper { 
    height: 240px; 
    overflow: hidden; 
} 
#wrapper ul { 
    position: relative; 
    list-style-type: none; 
} 
#wrapper li { 
    height: 30px; 
    line-height: 12px; 
    list-style-type: none; 
}

(function(){ 
    var i = 0; 

    function Scroll() { 
     i++; 

     if (i < $('li').length) { // scroll down till we are at the last item 
      $('ul').animate({top:'-=30'+'px'}, 1000); 
     } 
    } 

    $(document).ready(function() { 
     var timeOut; 

     $('ul').hover(
      function(e) { // on hover in, stop the animation 
       clearTimeout(timeOut); 
      }, 
      function(e) { // on hover out, continue 
       timeOut = setInterval(Scroll, 1000); 
      } 
     ); 

     timeOut = setInterval(Scroll, 1000); // start the animation at document load 

    }); 

})();

提前感謝！

來源

2012-11-06 methuselah

動畫會自動改變速度。這被稱爲「寬鬆」，並且兩個標準動畫選項是擺動和線性的。 Swing是默認設置，並導致快速然後慢的外觀。通過在動畫中指定線性的，你應該擺脫這個問題：

$('ul').animate({top:'-=30'+'px'}, 1000, 'linear');

無限循環是非常棘手。你需要做的是將所有內容放入一系列絕對定位的容器中，然後讓它們中的每一個都向上移動，並設置一個檢測功能，告訴容器何時完全離開視野，然後繼續將其設置到列表的末尾。

來源

2012-11-06 19:09:16 Bubbles

防止「跳」垂直自動滾動和循環垂直自動滾動

回答

相關問題