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

Demo