jquery - 防止多个jQuery动画同时发生

Question

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

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

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

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

http://jsfiddle.net/B7UGm/

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

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

谢谢！

Answer 1

设置stop(true, true)。

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

演示

Answer 2

您可以使用 css3 转换，例如：

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

让我知道这个是否奏效 ：）

Answer 3

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

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