Question

我有一个setInterval（）函数，它突出显示4个div中的一个，然后进入下一个div，整个循环重复并需要4秒才能完成。但是我想创建一个函数，一旦我将鼠标悬停在其中一个div上，就会停止setInterval（）函数，只是突出显示我正在盘旋的div。在离开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（）函数的函数。当我在“content”类上创建.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

使用.hover（）时停止setInterval（）函数？

1 个答案: