jquery - 使用 .hover() 时停止 setInterval() 函数？

Question

我有一个 setInterval() 函数，它突出显示 4 个 div 之一，然后继续到下一个，整个循环重复并需要 4 秒才能完成。但是我想创建一个函数，一旦我将鼠标悬停在其中一个 div 上并突出显示我正在悬停的 div 时，它就会停止 setInterval() 函数。离开 div 时，setInterval() 函数应该重新启动。

HTML:

<div class="content color">
<p>Hello</p>
</div>

<div class="content ">
<p>Ola</p>
</div>

<div class="content ">
<p>Namaste</p>
</div>

<div class="content ">
<p>See Ya!</p>
</div>

JQuery:

 function loopy(){
    var items  = $(" .content");
    var length = items.length;

    items.each(function(i, ele) {
        if ($(ele).hasClass("color")) {
            $(ele).animate({opacity: 0.5},500).removeClass("color");

            if (i < (length-1)) {

                $(items[i+1]).animate({  opacity: 1},500).addClass("color");

            }
            else {
                $(items[0]).animate({ opacity: 1},500).addClass("color");
            }

            return false;
        }
    });

function CF()
{
    window.setInterval(function(){loopy();},4000);
}

CF();

我将 CF() 创建为一个包含 setInterval() 函数的函数。当我在“内容”类上创建 .hover() 函数时，我想不出如何停止 CF() 。一旦我的鼠标停止悬停在“内容”类上，CF() 应该重新启动。

Answer 1

试试这个(更新的代码)

var intervalId;

function loopy() {
    var items = $(" .content");
    var length = items.length;

    items.each(function(i, ele) {
        if ($(ele).hasClass("color")) {
            $(ele).animate({opacity: 0.5}, 500).removeClass("color");

            if (i < (length - 1)) {

                $(items[i + 1]).animate({opacity: 1}, 500).addClass("color");

            }
            else {
                $(items[0]).animate({opacity: 1}, 500).addClass("color");
            }

            return false;
        }
    });
}

function CF() {
    intervalId = setInterval(function() {
        loopy();
    }, 4000);
}
$('.content').mouseenter(function() {
    clearInterval(intervalId);
    $('.color').removeClass('color');
    $(this).addClass('color');
}).mouseleave(function() {
    CF();
});

CF();

jsFiddle