Hi,
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();
});
});
