jQuery 在 Chrome 和 Mac OS 上停止运行

看看这个小提琴：http://jsfiddle.net/mattball/nWWSa/ 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();

淡入/淡出几次效果很好，但随后就开始了very慢的。问题是什么？这是一个错误吗？

问题是回调的执行时间为each元素一旦淡入/淡出，而不仅仅是当它们全部淡入/淡出时。所以这样就积累了很多回调。它是这样的（假设我们只有两个元素，A 和 B）：

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

然后你打电话fadeOut在这两个元素上：
A: [fadeOut]
B: [fadeOut]

A 淡出：fadeIn被添加到两个元素中。
A: [fadeIn]
B: [fadeOut, fadeIn]

然后 B 淡出：再次，fadeIn被添加到两个元素中。
A: [fadeIn, fadeIn]
B: [fadeIn, fadeIn]

A 淡入：fadeOut被添加到两个元素中。
A: [fadeIn, fadeOut]
B: [fadeIn, fadeIn, fadeOut]

B 淡入：...
A: [fadeIn, fadeOut, fadeOut]
B: [fadeIn, fadeOut, fadeOut]

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

您可以使用以下方法解决此问题延迟对象:

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

DEMO http://jsfiddle.net/nWWSa/2/

Now, 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 http://jsfiddle.net/nWWSa/3/

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