jQuery Animate - 使用 2 个不同的计时器将 2 个不同的动画属性应用于同一个元素答案

【问题标题】：jQuery Animate - Apply 2 different animation attributes to the same element with 2 different timersjQuery Animate - 使用 2 个不同的计时器将 2 个不同的动画属性应用于同一个元素
【发布时间】：2011-11-28 16:00:09
【问题描述】：

下面的 jQuery 效果很好，但我希望不透明度为 2000 年，marginLeft 为 4000 年。我尝试对元素进行两次动画处理，但在另一个完成之前不会开始。这是我的工作代码：

$('.active-text', $('#message-box')).animate({opacity:1, marginLeft: "60px"}, 4000);

这是我尝试做的以获得预期效果：

$('.active-text', $('#message-box')).animate({opacity:1}, 2000);
$('.active-text', $('#message-box')).animate({marginLeft: "60px"}, 4000);

【问题讨论】：

您可以查看这个答案（可能重复）：stackoverflow.com/questions/1251300/… [1]：stackoverflow.com/questions/1251300/…

标签： jquery jquery-animate

【解决方案1】：

在您的动画中设置 queue: false 以同时运行它：

$('.active-text', $('#message-box')).animate({opacity:1}, { queue: false, duration: 2000 });
$('.active-text', $('#message-box')).animate({marginLeft: "60px"}, { queue: false, duration: 4000 });

【讨论】：

太棒了，谢谢！我把它简化成这样： $('.active-text', $('#message-box')).animate({opacity:1}, { queue: false, duration: 1000 }).animate({marginLeft : "60px"}, { queue: false, duration: 4000 });