jQuery回调冻结答案

【问题标题】：jQuery callback freezing upjQuery回调冻结
【发布时间】：2012-05-17 20:48:41
【问题描述】：

I made a little fiddle to illustrate the problem.

基本上这是可行的：

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 上崩溃了

【问题讨论】：

某处应该有一个“不要在家里尝试这个”的标签。因为你猜怎么着？它真的冻结了浏览器！
是的，虽然The second way makes the page freeze up. 我确实提到过
是的，我看到了，但我认为可以通过点击“停止脚本”按钮来解决。在那种情况下，按钮没有帮助，我不得不杀死浏览器。
@IgorZinov'yev：知道为什么会这样吗？
visible.animate({opactiy: 1.0 } fadeOut('slow', function() { hidden.fadeIn(100) }); } }, 3000);

标签： javascript jquery

【解决方案1】：

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

【讨论】：

换句话说，.fadeIn() 的调用次数比 OP 预期的要多？每次淡出一次，而不是最后一次。我确实注意到动画最终会结束。

【解决方案2】：

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

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

只需使用：

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

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

从头开始，我看到 jsfiddle 已更改，现在它只有一个元素。它之前崩溃并不奇怪 - 对象太多。

第三，fadeOut 之后没有任何东西淡入，因为在您分配 hidden 变量时没有隐藏的 div。您必须在回调中使用它：

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

【讨论】：