CODEWITHSUNDEEP
jqueryhover
Sparkup
Sparkup

Reputation: 3754

jquery pause resume on hover

I'm having trouble understanding why this is stops working.

I've set up an example here :

http://jsfiddle.net/MNT4e/

The pause/resume on hover works fine, after 2 loops however it stops.

How can I make the hover function work continuously?

Upvotes: 4

Views: 3680

Answers (3)

Loktar
Loktar

Reputation: 35309

Live Demo (removed a bunch of list items for testing purposes)

Doesn't use the pause/resume plugin as I am pretty sure that was causing the issue. What this does is just stops the animation on hover, and restarts the animation when you leave. Since you already had the animation setup to be based on the current position it resumes as normal.

Edit Fixed the animation slowing down on each hover. Should work perfectly now regardless of the amt of times it loops.

var vox_news = 0;

$('.voxNews li').each(function() {
    vox_news += $(this).outerWidth( true );
});

$('.voxNews').parent().append($('.voxNews').clone());
    function setupNews(w) {
        function phase1() {
            var voxNews = $('.voxNews').first(),
                curMargin = voxNews.css('margin-left').replace("px", ""),
                animSpeed = (w*20) - (Math.abs(curMargin)*20);

            voxNews.animate({'margin-left' : '-' + w + 'px'}, animSpeed, 'linear', phase2);
        }
        function phase2() {
            $('.voxNews').first().css({'margin-left' : '0px'});
             phase1();
        }
        $('.voxNews li a').hover(function() {
            $('.voxNews').stop();
        }, function() {
            phase1();
        });
        phase1();
    }

setupNews(vox_news);

Upvotes: 4

kei
kei

Reputation: 20471

Remove your hover handler and add:

$('.voxNews li').delegate('a', 'mouseenter', function() {
    $('.voxNews').pause();
});
$('.voxNews li').delegate('a', 'mouseleave', function() {
    $('.voxNews').resume();
});

Upvotes: 0

benqus
benqus

Reputation: 1139

I think you should define a global boolean variable like this:

var isAnimating = false;

and then control your animation based on that variable. ex:

animateNews() {
    if (isAnimating) {
        //list animation
    }
}

listResume () { isanimating = true; }

listPause () { isanimating = false; }

and your animation would be like:

window.onload = function () { var t = setTimeout("animateNews", 40); }

I wouldn't use jQuery for that one, since jQuery uses a little CPU also if you begin animating stuff... You would need it if you want to grow boxes smoothly or to slide images (gallery, or something like that).

Upvotes: 0

Related Questions