Question

I currently have to two links, two arrows one pointing up and the other down, what I want it to do is scroll content located in <div id="scroller1"> which is masked by <div id="scroller">.

In other words:

<div id="scroller">
    <div id="scroller1">...</div>
</div>

My code looks like this:

$("a.mouseover_up").mousedown(function () {
var currentMargin = $("#scroller1").css("marginTop");
currentMargin = currentMargin.replace("px","");

$("#scroller1").animate({"marginTop": (currentMargin - 5) + "px"});
return false;
});

What happens now is, it executes the animate properly, but stops scrolling after 5px. I want it to animate as long as user is holding the mouse button down on the link above.

Any help is appreciated. Thanks.

Answer 1

I believe something like this would work:

var timeout;
var clicker = $('#clicker');


clicker.mousedown(function(){
    timeout = setInterval(function(){
        // Go up!
    }, 500);

    return false;
});

clicker.mouseup(function(){
    clearInterval(timeout);

    return false;
});

See this demo: http://jsfiddle.net/J9QNZ/2