Question

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

为了便于说明，我在jsFiddle上创建了一个简化示例。（在这个例子中，＃box可以设置为width：50％，但我正在处理的实际应用程序更复杂，需要对盒子元素进行复杂的计算。）

我有一个装有盒子的容器。调整容器大小时，应对框进行动画处理并调整大小。

但是，如果您缓慢调整结果框的大小（在1秒钟内），#box会以不稳定的方式调整大小。

$('#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});
});

的 Demo 的

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);

防止多个jQuery动画同时发生

3 个答案: