javascript - 悬停时暂停滚动

Question

我正在为一个滚动的 div 制作动画，并且已经能够让触发器在单击和/或鼠标输入时触发、滚动和停止。现在我想让它在鼠标悬停在 div 上而不是停止时暂停。我是一个完全的 jquery 新手，所以我真的不知道什么会起作用，什么不会。到目前为止，这是我的代码，它运行良好。

$(document).ready(function() {
    var sL = 4000;
    $('.scrolls').animate({
        scrollLeft : sL
    },100000, 'linear');

    $(".scrolls").on("click",function(){
        $(this).stop(true,false);
    });

})

非常感谢任何帮助!!

谢谢!

http://jsfiddle.net/BMb65/9/

Answer 1

这应该有效:

$(document).ready(function() {
    var $div = $('.scrolls');
    var sL = 4000;
    var startTime = new Date().valueOf();
    var timePassed;
    var stopped = false;
    //animate:
    $div.animate({
        scrollLeft : sL
    },100000, 'linear');

    //on click, stop animation:
    $div.on("click",function(){
        $div.stop(true,false);
        stopped = true;
    });

    //on mouseover -> stop animation (pause)
    //on mouseout -> resume animation (actually a new animation
    $div.hover(function() { //mouseenter
        $div.stop(true, false);
        timePassed = (new Date()).valueOf() - startTime;
    }, function() { //mouseleave
        if (!stopped) { //resume only if it was stopped on mouse enter, not on click
            $div.animate({
                scrollLeft : sL
            }, 100000 - timePassed, 'linear');
        }
    });
});

使用此代码，当您将鼠标悬停在 div 上时，动画将停止。我们记录自它开始以来经过了多少时间，因此我们可以创建一个新动画来模拟旧动画的恢复，方法是将其持续时间设置为我们的原始持续时间减去已经过去的时间。

希望这对您有所帮助。