javascript - 当用户单击新选项卡时打破循环 - jQuery Tabs

Question

我正在为我的网站开发一些选项卡式导航，并且有一个问题想要解决。

我一整天都在绞尽脑汁，却一无所获。非常感谢一些帮助。

代码如下:http://jsfiddle.net/EghAt/

1) 请注意，当您单击选项卡 1 并立即单击选项卡 2 时，选项卡 1 会继续循环显示所有结果。 我希望停止循环 选项卡 1 结果并开始循环 选项卡 2 结果。

这可能吗？

如何实现这一目标？

非常感谢您的指点

Answer 1

您可以通过添加在此修改后的函数中看到的 .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 文档了解详情。

在进一步查看这段代码时，我相信它确实满足了您在问题中所要求的要求(它停止了上一个选项卡循环并启动下一个选项卡)，但我不确定这实际上是您想要的，因为它留下了选项卡中的项目仅部分展开。如果这就是您想要的，那么这将做到这一点。

如果这不是您想要的，则必须进一步修改代码，以便不仅停止当前正在运行的动画，而且将旧选项卡的所有项目置于相同的状态。

正如我怀疑的那样，您实际上想要的比您要求的更多(根据您最近的评论)。您希望隐藏之前的项目，无论它们之前处于什么状态。您可以使用此代码来完成此操作，我将 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/ .