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

我有一个setInterval（）函数，它高亮显示4个div中的一个，然后进入下一个div，整个循环重复，需要4秒钟。但我想创建一个函数，当我悬停在某个div的顶部时，它将停止setInterval（）函数，并高亮显示我悬停的div。离开div时，setInterval（）函数应再次启动

HTML:

你好

奥拉

纳马斯特

再见

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

函数loopy（）{
var项目=$（“.content”）；
变量长度=items.length；
项目。每个（功能（i、ele）{
if（$（ele）.hasClass（“颜色”））{
$（ele）.animate（{opacity:0.5}，500）.removeClass（“color”）；
如果（i<（长度-1））{
$（items[i+1]）.animate（{opacity:1}，500）.addClass（“color”）；
}
否则{
$（items[0]）.animate（{opacity:1500}.addClass（“color”）；
}
返回false；
}
});
函数CF（）
{
setInterval（函数（）{loopy（）；}，4000）；
}
CF（）；

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

试试这个（更新的代码）

var有效期；
函数loopy（）{
var项目=$（“.content”）；
变量长度=items.length；
项目。每个（功能（i、ele）{
if（$（ele）.hasClass（“颜色”））{
$（ele）.animate（{opacity:0.5}，500）.removeClass（“color”）；
如果（i<（长度-1））{
$（items[i+1]）.animate（{opacity:1}，500）.addClass（“color”）；
}
否则{
$（items[0]）.animate（{opacity:1500}.addClass（“color”）；
}
返回false；
}
});
}
函数CF（）{
intervalId=setInterval（函数（）{
loopy（）；
}, 4000);
}
$（'.content'）.mouseenter（函数（）{
clearInterval（intervalId）；
$（'.color'）.removeClass（'color'）；
$（this.addClass（'color'）；
}).mouseleave（函数（）{
CF（）；
});
CF（）；

试试这个（更新的代码）

var有效期；
函数loopy（）{
var项目=$（“.content”）；
变量长度=items.length；
项目。每个（功能（i、ele）{
if（$（ele）.hasClass（“颜色”））{
$（ele）.animate（{opacity:0.5}，500）.removeClass（“color”）；
如果（i<（长度-1））{
$（items[i+1]）.animate（{opacity:1}，500）.addClass（“color”）；
}
否则{
$（items[0]）.animate（{opacity:1500}.addClass（“color”）；
}
返回false；
}
});
}
函数CF（）{
intervalId=setInterval（函数（）{
loopy（）；
}, 4000);
}
$（'.content'）.mouseenter（函数（）{
clearInterval（intervalId）；
$（'.color'）.removeClass（'color'）；
$（this.addClass（'color'）；
}).mouseleave（函数（）{
CF（）；
});
CF（）；

---

是的，这会停止该功能，但现在我遇到了进一步的问题。当鼠标进入时，我想删除“颜色”从任何div中初始化并将其添加到我悬停的div中。我如何才能做到这一点？是的，这会停止函数，但现在我遇到了进一步的问题。当鼠标进入时，我想从任何div中删除“color”类并将其添加到我悬停的div中。我如何才能做到这一点？

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

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