Цикл анимации jQuery не работает

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 без полосы прокрутки, поэтому вам нужно фактически переместить верхние координаты содержимого ..