防止多个jQuery动画同时发生

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

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

我有一个里面有一个盒子的容器。调整容器大小时，应为长方体设置动画，并将其调整为特定大小

但是，如果您缓慢地调整结果框的大小（在1秒的时间内），则#框的大小会快速调整

最理想的情况是，我想合并成一个动画，使其改变大小在一个很好的平滑的方式

谢谢

设置

停止（真、真）

---

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

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

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

让我知道这是否有效：）

你也可以使用.delay（） 例如：

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

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

---

与您可能会发现的其他问题一样，应用

.stop（true，true）

似乎可以使问题不那么急促。如果这是一个可能的选择，那么这可能是最好的方法。它使动画更加流畅，并且不需要花哨的javascript逻辑。iv在过去使用过多次：）并且它可以处理大多数属性，比如背景色，所以你可以制作褪色的背景。。或者平滑动画标题…是的，这是一个很好的解决方案，但不幸的是，IE8和IE9不支持css3转换：（@joshli所以不支持它们：p hhh