防止多个jQuery动画同时发生答案

【问题标题】：Prevent multiple jQuery animations from happening at the same time防止多个jQuery动画同时发生
【发布时间】：2012-09-17 03:28:16
【问题描述】：

这个问题可能与其他关于防止动画排队的问题类似，但这个问题不同。

出于说明目的，我在 jsFiddle 上创建了一个简化示例。（在本例中，#box 可以设置为 width:50%，但我正在处理的实际应用程序更复杂，需要对框元素进行复杂计算）。

我有一个容器，里面有一个盒子。当容器调整大小时，盒子应该动画并调整到一定的大小。

但是，如果您缓慢地（超过 1 秒）调整结果框的大小，#box 会以不平稳的方式调整大小。

http://jsfiddle.net/B7UGm/

$('#container').resize(function() {
    $("#box").animate({'width':$('#container').width() * 0.5});
});

最理想的情况是，我想将动画合并为一个，以便它以一种非常流畅的方式改变大小。

谢谢！

【问题讨论】：

与您可能发现的其他问题一样，应用.stop(true, true) 似乎可以减少问题。

标签： jquery resize jquery-animate

【解决方案1】：

设置stop(true, true)。

$('#container').resize(function() {
    $("#box").stop(true, true).animate({'width':$('#container').width() * 0.5});
});

Demo

【讨论】：

【解决方案2】：

您可以使用 css3 过渡，例如：

#box
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}

让我知道这是否有效:)

【讨论】：

如果这是一个可能的选择，它可能是最好的方法。它使动画更加流畅，并且不需要花哨的 JavaScript 逻辑。 jsfiddle.net/B7UGm/4
iv 过去曾多次使用它 :) 它适用于大多数属性，如背景颜色，因此您可以制作褪色背景......或平滑动画标题......
是的，这是一个很好的解决方案，但不幸的是，IE8 和 IE9 不支持 css3 过渡 :(
@joshli 所以不要支持他们：p hhhh

【解决方案3】：

你也可以使用 .delay() 例如：

$('#foo').slideUp(300).delay(800).fadeIn(400);

【讨论】：