我正在为我的网站开发一些选项卡式导航，我有一个问题想要解决。
我整天都在摸索，却一无所获。非常感谢一些帮助。
这里是代码：http://jsfiddle.net/EghAt/
1) 请注意，当您单击Tab 1，然后立即单击Tab 2，Tab 1 会继续循环输出所有结果。 我希望这停止循环 Tab 1 结果并开始循环 Tab 2 结果。
这可能吗？
我如何做到这一点？
非常感谢您的任何指点
【问题讨论】：
标签： javascript jquery html loops tabs
你可以在你的这个函数中停止之前的动画，通过添加你在这个修改后的函数中看到的.stop(true, true)：
function fadeOutItems(ele, delay) {
var $$ = $(ele), $n = $$.next();
// Toggle the active class
$$.toggleClass('active');
// Ensure the next element exists and has the correct nodeType
// of an unordered list aka "UL"
if ($n.length && $n[0].nodeName === 'UL') {
$('li', $n).each(function(i) {
// Determine whether to use a fade effect or a very quick
// sliding effect
delay ? $(this).stop(true, true).delay(i * 400).fadeToggle('slow') : $(this).stop(true, true).slideToggle('fast');
});
}
}
由于您在当前活动选项卡和新活动选项卡上都调用了它，这应该会停止当前活动选项卡上正在进行的任何动画。
有关详细信息，请参阅.stop() 上的 jQuery 文档。
在进一步查看此代码时，我相信它可以满足您在问题中真正要求的功能（它会停止上一个选项卡循环并启动下一个选项卡），但我不确定这实际上是您想要的，因为它离开了选项卡中的项目仅部分展开。如果这就是你想要的，那么这将做到这一点。
如果这不是您想要的，则必须进一步修改代码，不仅停止当前正在运行的动画，而且将旧选项卡的所有项目置于相同状态。
正如我所怀疑的那样，您实际上想要的比您要求的要多（根据您最近的 cmets）。您希望隐藏以前的项目，无论它们以前处于什么状态。您可以使用我将slideToggle() 更改为slideUp() 的代码来做到这一点。如果动画尚未开始，则不能使用任何形式的切换，因为切换会出错（它只是反转状态）。相反，在隐藏时，您必须使用以不可见项目结束的明确动画。您可以在我使用 slideUp() 的地方使用此代码，但如果您愿意，可以选择不同的代码：
// A helper function that allows multiple LI elements to be either
// faded in or out or slide toggled up and down
function fadeOutItems(ele, show) {
var $$ = $(ele), $n = $$.next();
// Toggle the active class
$$.toggleClass('active');
// Ensure the next element exists and has the correct nodeType
// of an unordered list aka "UL"
if ($n.length && $n[0].nodeName === 'UL') {
$('li', $n).each(function(i) {
// Determine whether to use a fade effect or a very quick
// sliding effect
show ? $(this).stop(true, true).delay(i * 400).fadeToggle('slow') : $(this).stop(true, true).slideUp('fast');
});
}
}
您可以在此处看到实际效果：http://jsfiddle.net/jfriend00/rzd3N/。
【讨论】：
问题就在这里。
$(this).delay(i * 400).fadeToggle('slow')
通过增加延迟，您正在一次为每个元素提供联邦效果。
以这种方式阻止它并不容易。正确的方法是调用一次只淡化一个元素的函数。然后这个函数将在给定的时间间隔（在你的例子中为 400）再次执行，并淡化下一个元素。
这样，将变量传递给函数，例如stopExecuting=true，将停止效果。
看看setInterval 和setTimeout 来实现这一点。
【讨论】：