Question

我正在为我的网站制作一些标签式导航，我有一个问题需要解决。

我整天都在乱乱，无处可去。真的很感激一些帮助。

以下是代码：http://jsfiddle.net/EghAt/

1）注意当您点击标签1 然后立即点击标签2 时，标签1 会继续循环显示所有结果。我希望如果这停止循环 Tab 1 结果并且刚开始循环 Tab 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/。

Answer 2

问题出在这里。

$(this).delay(i * 400).fadeToggle('slow')

通过增加延迟，您可以同时为每个元素提供联邦效果。

以这种方式阻止它并不容易。执行此操作的正确方法是调用一次只能淡化元素的函数。然后，此函数将以给定的时间间隔（在您的情况下为400）再次执行，并淡化下一个元素。

这样，将变量传递给函数（例如stopExecuting=true）将停止效果。

请查看setInterval和setTimeout以实现此目标。

当用户点击新标签时突破循环 - jQuery标签

2 个答案: