Question

我正在尝试创建一个循环动画，该动画从onmousedown开始并在onmouseout上停止。效果是一个简单的滚动，它将继续循环，直到您释放鼠标。

我创建了一个执行.animate方法的函数，它将自身作为回调传递，但代码只运行一次。

以下是整个代码：

$(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

您是否尝试删除stop()来电？

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
            );
        }
    }
}

您不需要停止，因为动画始终仅在当前动画结束后排队。

此外，在它到达底部后，是否应该向上滚动然后再向下滚动？

Answer 2

当你说“滚动”时，你是在谈论带有滚动条的元素的实际滚动位置（就像现在可能在本页右侧那样）？

如果这就是你的意思，jQuery有一个scrollTop()方法，可以用来获取和设置滚动位置。

var topCoord = $content.scrollTop();

...

$content.animate({
            scrollTop: "+=" + amountToScroll
        }, 1000,
        function(){scrollUp()}
        );

这将移动内容的滚动条位置。

不确定这是否是您要执行的操作，或者它是否更像是scroller在没有滚动条的情况下剪切content的滑块，因此您需要实际移动顶部内容的坐标..

jQuery动画循环不起作用

2 个答案: