同时对一个元素产生多种影响[重复]

Posted 2023-05-08

【中文标题】同时对一个元素产生多种影响[重复]

【英文标题】：multiple effects on one element simultaneously [duplicate]

【发布时间】：2014-09-24 03:10:47

【问题描述】：

我正在尝试同时淡入和动画。然而，它一个接一个地做。你是如何同时做到的。

我试过了：

$('#box').fadeIn(1000);
$('#box').animate(marginTop:'0', 1000);

与

$('#box').fadeIn(1000).animate(marginTop:'0', 1000);

但他们都做同样的事情。一个事件然后另一个事件。我如何同时执行它们？

【参考方案1】：

您可以为不透明度设置动画而不是 FadeIn。所以将元素设置为 opacity 0，去掉 display:none，然后对 opacity 进行动画，它会和 margin 动画同时发生。

【参考方案2】：

你必须使用dequeue:

当调用 jQuery.dequeue() 时，队列中的下一个函数从队列中移除，然后执行。

这将导致它们同时发生。

$('#box').fadeIn(1000).dequeue().animate(marginTop:'0', 1000);

【讨论】：

这行得通，除了在淡入淡出之前我有延迟（），而且出队似乎忽略了延迟