jQuery在Chrome和Mac OS上停顿(jQuery draws to a halt on Chrome and mac OS)

jQuery在Chrome和Mac OS上停顿(jQuery draws to a halt on Chrome and mac OS)

看看这个小提琴： 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();

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

Check out this 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();

The fading in/out works fine a couple of times, but then starts going very slow. What is the problem? Is this a bug?

最满意答案

问题在于， 每个元素在淡入/淡出时都会执行回调，而不仅仅是全部回调。 所以这积累了很多回调。 它是这样的（可以说我们只有两个元素，A和B）：

起初，队列是空的： 答： [] B： []

然后你在这两个元素上调用fadeOut ： 答： [fadeOut] B： [fadeOut]

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

然后B淡出：同样， fadeIn被添加到两个元素。 答： [fadeIn, fadeIn] B： [fadeIn, fadeIn]

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

B淡入：... - 答： [fadeIn, fadeOut, fadeOut] B： [fadeIn, fadeOut, fadeOut]

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

你可以使用延迟对象来解决这个问题：

$.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元素。

The problem is that the callbacks are executed for each element once it is faded in/out, not only when all of them are. So this accumulates a lot of callbacks. It goes like this (lets say we have only two elements, A and B):

At the beginning, the queues are empty: A: [] B: []

Then you call fadeOut on both elements: A: [fadeOut] B: [fadeOut]

A fades out: fadeIn is added to both elements. A: [fadeIn] B: [fadeOut, fadeIn]

Then B fades out: Again, fadeIn is added to both elements. A: [fadeIn, fadeIn] B: [fadeIn, fadeIn]

A fades in: fadeOut is added to both elements. A: [fadeIn, fadeOut] B: [fadeIn, fadeIn, fadeOut]

B fades in: ... A: [fadeIn, fadeOut, fadeOut] B: [fadeIn, fadeOut, fadeOut]

And so forth. The exact order might differ, but as animations are queued by default, this adds more and more callbacks to the queue.

You can solve this using deferred objects:

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

DEMO

Now, fadeThemIn is only called when the animation of all elements is completed.

---

Another way would be to change the functions to not work on all elements, but only on the current one:

var $lis = $('ul.innerfade > li'); function fadeThemOut() { $(this).fadeOut('slow', fadeThemIn); } function fadeThemIn() { $(this).fadeIn('slow', fadeThemOut); } // kick it off fadeThemOut.call($lis);

though it could be that the elements are not in sync then.

DEMO

In your specific case, you could just fade in and out the ul element.