Question

I’m trying to create a looping animation that starts on onmousedown and stops on onmouseout. The effect is a simple scroll that will continue looping until you release the mouse.

I’ve created a function which performs the .animate method and it passes itself as a callback but the code only runs once.

Here’s the entire code:

$(document).ready(function() {
var $scroller = $("#scroller");
var $content = $("#content", $scroller);

// lineHeight equal to 1 line of text
var lineHeight = $content.css('line-height');

//Amount to scroll = 3 lines of text a time
var amountToScroll = lineHeight.replace("px","")*3;
var maxScroll = $content.height() - $scroller.height();

function scrollDown() {
    var topCoord = $content.css("top").replace("px","");
    if(topCoord > -maxScroll) {
        if((-maxScroll-topCoord) > -amountToScroll) {
            $content.stop().animate({
                top: -maxScroll
            }, 1000
            );
        }
        else {
            $content.stop().animate({
                top: "-=" + amountToScroll
            }, 1000,
            function(){
                scrollDown()
            }
            );
        }
    }
}

function scrollUp() {
    var topCoord = $content.css("top").replace("px","");
    if(topCoord < 0) {
        if(topCoord > -amountToScroll) {
            $content.stop().animate({
                top: 0
            }, 1000
            );
        }
        else {
            $content.stop().animate({
                top: "+=" + amountToScroll
            }, 1000,
            function(){scrollUp()}
            );
        }
    }
}

$("#scroll-down").mousedown(function() {
    scrollDown();
});

$("#scroll-down").mouseup(function() {
    $content.stop();
});

$("#scroll-up").mousedown(function() {
    scrollUp();
});
$("scroll-up").mouseup(function() {
    $content.stop();
});
});

Answer 1

Have you tried removing the stop() calls?

function scrollDown() {
    var topCoord = parseInt($content.css("top").replace("px",""));
    if(topCoord > -maxScroll) {
        if((-maxScroll-topCoord) > -amountToScroll) {
            $content.animate({
                top: -maxScroll
            }, 1000
            );
        }
        else {
            $content.animate({
                top: "-=" + amountToScroll
            }, 1000, scrollDown
            );
        }
    }
}

You don’t need the stop because the animation is always queued only after the current animation has ended.

Also, after it reaches the bottom, is it supposed to scroll back up then down again?