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 开发者_如何学Pythonpause/resume on hover works fine, after 2 loops however it stops.

How can I make the hover function work continuously?

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);

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).

Remove your hover handler and add:

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