javascript - jQuery回调冻结

Question

我做了一个小小提琴来说明这个问题。

基本上这有效：

var visible = $('#container').find(' > div:visible'),
    hidden = $('#container').find(' > div:hidden');

visible.fadeOut(1000, function() {
});
setTimeout(function() { hidden.fadeIn('slow') },1000);

这不会：

var visible = $('#container').find(' > div:visible'),
    hidden = $('#container').find(' > div:hidden');

visible.fadeOut(1000, function() {
    hidden.fadeIn(100)
});

第二种方法使页面冻结。

我使用回调的方式有问题吗？

我需要能够将它放入动画队列中，因为我需要能够处理stop()所有事情。

有什么办法可以使这项工作？我在 Chrome 和 FF 上坏了

Answer 1

您的第二个解决方案中的问题是，将为每个可见 div 启动一个动画，并且对于每个动画（已完成），所有隐藏的 div 都会启动淡入淡出动画。

Answer 2

呃，首先，你为什么要使用这样的结构：

 $('#container').find(' > div:visible');

只需使用：

 $('#container > div:visible');

其次，不要使用#container，因为由于某种原因，如果里面的301个元素触发了 fadeOut，这实在是太多了。

Scratch that, i see jsfiddle has been changed and now it's only one element in there. Not surprised that it crashed before - too many objects.

Third, after fadeOut nothing fades in because at the point when you assign hidden variable there is no hidden divs. You'll have to use this in your callback:

 $('#container2 > div:hidden').fadeIn(1000)