user3158649 user3158649 - 2 years ago 136
HTML Question

Pause scrolling on hover

I'm animating a scrolling div, and have been able to get the trigger to fire, scroll, and stop on click and /or mouseenter. Now I'd like to have it pause when the mouse hovers over the div instead of stop. I'm a total jquery newb, so I really don't know what will work and what won't. Here's my code so far, and it's working fine.

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

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

})


Any help is SO VERY appreciated!!

Thanks!

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

Answer Source

This should work:

$(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');
        }
    });
});

With this code, when you hover over the div, the animations stops. We record how much time has passed since it started, so we can create a new animation that will simulate the resuming of the old one, by setting its duration to our original duration less the time already passed.

Hope this helps.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download