jQuery 在 Chrome 和 Mac OS 上停止运行

Question

看看这个 fiddle :http://jsfiddle.net/mattball/nWWSa/

var $lis = $('ul.innerfade > li');

function fadeThemOut()
{
    $lis.fadeOut('slow', fadeThemIn);
}

function fadeThemIn()
{
    $lis.fadeIn('slow', fadeThemOut);
}

// kick it off
fadeThemOut();

淡入/淡出几次效果很好，但随后开始变得非常缓慢。问题是什么？这是一个错误吗？

Answer 1

问题是，一旦每个元素淡入/淡出，就会执行回调，而不仅仅是在所有元素淡入/淡出时执行。所以这样就积累了很多回调。它是这样的(假设我们只有两个元素，A 和 B):

一开始，队列是空的:
答:[]
B:[]

然后对两个元素调用 fadeOut:
答:[淡出]
B:[淡出]

淡出:fadeIn 被添加到两个元素。
答:[淡入]
B:[淡出，淡入]

然后 B 淡出:再次将 fadeIn 添加到两个元素。
答:[fadeIn, fadeIn]
B:[淡入，淡入]

淡入:fadeOut 已添加到两个元素。
答:[淡入、淡出]
B:[淡入、淡入、淡出]

B 淡入:...
答:[淡入、淡出、淡出]
B:[淡入、淡出、淡出]

等等。确切的顺序可能有所不同，但由于默认情况下动画是排队的，这会向队列中添加越来越多的回调。

您可以使用延迟对象来解决此问题:

$.when($lis.fadeOut('slow')).then(fadeThemIn);

DEMO

现在，仅当所有元素的动画完成时才会调用fadeThemIn。

<小时/>

另一种方法是将函数更改为不适用于所有元素，而仅适用于当前元素:

var $lis = $('ul.innerfade > li');

function fadeThemOut()
{
    $(this).fadeOut('slow', fadeThemIn);
}

function fadeThemIn()
{
    $(this).fadeIn('slow', fadeThemOut);
}

// kick it off
fadeThemOut.call($lis);

尽管元素可能不同步。

DEMO

在您的具体情况下，您可以淡入和淡出 ul 元素。