Question

My vertical auto scroll seems to stop erratically at some points, I would like to have a smooth scroll instead. Secondly, I would like the vertical scroll to reset automatically (almost loop infinitely or give the implication of it never ending rather than just jumping). How would I go about accomplishing this? Here is my code so far: 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;
}
​​

JS

(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

    });

})();
​

Thanks in advance!

Answer 1

Animations automatically vary in speed. This is called “easing”, and the two standard options for animate are swing and linear. Swing is the default, and causes the fast-then-slow look. By specifying linear in the animation, you should get rid of this problem:

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

Looping infinitely is much trickier. What you’d have to do is put all your content in a series of absolutely positioned containers, then have each of them animate going upwards, and set up a detection function that tells when a container has completely left the field of vision, and then proceed to set it to the end of the list.