Pause scrolling on hover

1 Views

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!!

Read More

Thanks!

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

Post Views: 1

Related posts

Leave a Reply

3 comments

  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.

  2. Why not using mouseenter and mouseleave events..

    Please check this fiddle out:
    Modified Code

    Basically you will be doing something like this:

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

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