Pause scrolling on hover

Question

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 1

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.