当鼠标进入按钮时jQuery横幅取消功能答案

【问题标题】：jQuery Banner cancel function when mouseenter over a button当鼠标进入按钮时jQuery横幅取消功能
【发布时间】：2011-06-13 01:45:35
【问题描述】：

我有一个带有 3 个图像的横幅，我希望使用 jQuery 淡入和淡出。我使用以下代码使这部分工作正常：

$j(文档).ready(函数() { 初始化横幅（）； startLoop = setInterval(initBanner,50000); 函数初始化横幅（）{ $j("##image1").delay(10000).fadeOut(1500, function(){ $j("##image2").fadeIn(1000, function(){ $j("##image2").delay(10000).fadeOut(1500, function(){ $j("##image3").fadeIn(1000, function(){ $j("##image3").delay(10000).fadeOut(1500, function(){ $j("##image1").fadeIn(1000); //inMotion = false; }); }); }); }); }); }

但是，横幅下方有 3 个链接，其中包含与其相关的图像。当我在按钮上鼠标输入时，我想将淡入淡出的图像更改为与按钮相关的图像。

我试过了

clearInterval(startLoop)

但是这会在清除之前等待动画完成。我想要的是能够立即停止动画并淡入相关图像。

有什么想法吗？

【问题讨论】：

标签： jquery mouseenter

【解决方案1】：

您的方法看起来有点奇怪，无论如何要立即停止所有当前动画，您需要对动画元素调用.stop() 方法。你应该传入两个参数，都设置为true，表示 (clearQueue && jumpToEnd);

function stopBanner() {
     clearInterval(startLoop);
     $('##image1, ##image2, ##image3').stop(true, true);
}

同样，您应该重新考虑您的代码。例如，缓存 DOM refs 在这里非常重要。

参考：.stop()

【讨论】：