暂停使用jQuery进行的无限循环

Question

I'm using Infinite Loop function which is a bit modified for my needs:

$(document).ready(function() {
var NewsRotator = {init: function()
{
    var numberOfTitles = $('.NewsRotator li').length;
    //set current item
    var currentTitle = 0;
    //show first item
    $('.NewsRotator li').eq(currentTitle).fadeIn(1000); //initial fade-in
    //loop through the items
    var infiniteLoop = setInterval(function(){
        $('.NewsRotator li').eq(currentTitle).fadeOut(100); //current item fade-out time
        if(currentTitle == numberOfTitles -1){
            currentTitle = 0;
        }else{
            currentTitle++;
        }
        $('.NewsRotator li').eq(currentTitle).fadeIn(900); //next item fade-in time
    }, 3000); //interval between items
}
};
NewsRotator.init();
});

Here is the working example on jsFiddle

What I want to do is to set an animation pause on mouse over and resume it when the mouse leaves.

Thank you!

Answer 1

Here's the method for setting a global flag to pause and play on hover, along with a jsFiddle .

var NewsRotator = (function(){
var numberOfTitles = $('.NewsRotator li').length,
    currentTitle = 0;
return {
    flag : true,
    init : function(){
        $('.NewsRotator').on({
            mouseenter : function(){
                NewsRotator.flag = false;
            },
            mouseleave : function(){
                NewsRotator.flag = true;
            }
        });
        $('.NewsRotator li').eq(currentTitle).fadeIn(1000);
        infiniteLoop = setInterval(function () {
            if (NewsRotator.flag == true){
                $('.NewsRotator li').eq(currentTitle).fadeOut(100);
                if (currentTitle == numberOfTitles - 1) {
                    currentTitle = 0;
                } else {
                    currentTitle++;
                }
                $('.NewsRotator li').eq(currentTitle).fadeIn(900);
            } else {
                return false;
            }
        }, 3000);
    }
};
}());
$(document).ready(function(){
NewsRotator.init();
});

Also - I think you can improve performance slightly by caching the 'li' selector.

Answer 2

There are two ways to achieve this:

1. Clear the animation and then restart it. That will also make sure the gap to the next item will always be constant.
2. Use a global flag to return early from the rotation function. Set the flag to true as long as the mouse is over the news item.

Answer 3

Take a look at this JQFAQ.com , here is the answer for pause and resume the timer. here there are more FAQs available, i hope this will help you to get more ideas