jQuery - 延迟同时在多个元素上运行多个动画答案

【问题标题】：jQuery - run multiple animations on multiple elements simultaneously with delayjQuery - 延迟同时在多个元素上运行多个动画
【发布时间】：2016-10-27 13:52:16
【问题描述】：

我自己似乎无法回答这个问题，我似乎也无法在任何论坛上找到答案。

我正在使用 .each() 循环多个 div 元素，我需要运行动画来向上滑动 div 并同时将其淡入。

var intAnimationDelay = parseInt($(this).attr('data-animate-delay'));
$(this).delay(intAnimationDelay).animate({'marginTop' : '50px'}, {duration: (500), queue: true});
$(this).delay(intAnimationDelay).animate({'opacity': '1'}, {duration: 500, queue: true});

我遇到的问题是 delay() 在两个动画之间添加了延迟。对此的替代方法当然是使用 setTimeout() 但我不能这样做，因为这意味着 $(this) 每次都只是针对相同的元素。

谁能建议我如何解决这个问题？

谢谢。

【问题讨论】：

为什么你有两个动画声明？只使用一个
尝试复制和测试jsfiddle.net/xogzvsjf/4
你干脆不添加第二个延迟怎么样？ this.delay.animate.animate 而不是 this.delay.animate.delay.animate

标签： jquery delay settimeout

【解决方案1】：

您可能在这里不必要地使事情复杂化了。您可以简单地为同一函数内的其他属性设置动画。这可能就足够了：

var intAnimationDelay = parseInt($(this).attr('data-animate-delay'));
$(this).delay(intAnimationDelay).animate({'margin-top' : '50px', opacity: '1'}, {duration: (500), queue: true});

PS：我以为你的意思是 margin-top 而不是 marginTop。

【讨论】：