Question

我正在设置滚动div的动画，并且能够触发点击和/或鼠标中心触发，滚动和停止。现在，当鼠标悬停在div上而不是停止时，我想让它暂停。我是一个完全jquery newb，所以我真的不知道什么会起作用，什么不起作用。到目前为止，这是我的代码，它工作正常。

$(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上时，动画将停止。我们记录自开始以来已经过了多少时间，因此我们可以通过将其持续时间设置为原始持续时间减去已经过去的时间来创建一个模拟旧旧动画恢复的新动画。

希望这有帮助。

Answer 2

为什么不使用mouseenter和mouseleave事件..

请检查这个小提琴： Modified Code

基本上你会做这样的事情：

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

$(".scrolls").on("mouseleave",function(){
    $(this).animate({
    scrollLeft : sL
    },100000, 'linear');
});

Answer 3

请看一下这个小提琴http://jsfiddle.net/93Ta8/

我正在做的就是利用

$(".scrolls").on("mouseenter"

和

$(".scrolls").on("mouseleave"

悬停时暂停滚动

3 个答案: