Javascript 鼠标悬停时停止jquery函数淡入淡出

我有如下html代码：

<div id="principal">
    <div id="quote1"> 1 Div </div>
    <div id="quote2"> 2 Div </div>
</div> 

问题是：我想在“Principal”div上停止mouseover上的fadeIn/fadeOut动画，并在mouseleave上返回动画。

---

如何停止动画并冻结实际div？

您可以使用类来确定间隔何时显示为hault。通过在hover和hover out上添加和删除它，间隔可以检查元素是否具有该类。如果他们有该类，则跳过该间隔的操作

jQuery（函数（）{
变量$els=$（'div[id^=quote]'），
i=0，
len=每平方米长度$els；
$els.slice（1.hide（）；
setInterval（函数（）{
if（！$els.hasClass（'pause'））{
$els.eq（i）.fadeOut（函数（）{
i=（i+1）%len
$els.eq（i）.fadeIn（）；
});
}
}, 2000);
$els.on（'mouseenter'，function（）{
$els.addClass（'暂停'）
});
$els.on（'mouseleave'，function（）{
$els.removeClass（'pause'）
});
})

1分区
2分区

.stop（true，true）

将暂停元素上当前有效的所有动画。请确保在使用

setInterval（）时彻底测试代码。

。在页面之间导航时，它的行为可能会异常。除了在页面之间导航外，setInterval（）还可能导致在7.10及更新版本中导出时出现问题。如果您在导出时遇到任何问题，我建议您使用某种MutationObserver（）构造。

  jQuery(function () {
    var $els = $('div[id^=quote]'),
        i = 0,
        len = $els.length;

        $els.slice(1).hide();
        setInterval(function () {
            $els.eq(i).fadeOut(function () {
                i = (i + 1) % len
                $els.eq(i).fadeIn();
            })
        }, 4000) 
    })