如何使同一目标上的多个 jQuery 动画同时运行？

【问题标题】：How to make multiple jQuery animations on the same target run at the same time?如何使同一目标上的多个 jQuery 动画同时运行？
【发布时间】：2015-01-02 09:55:40
【问题描述】：

查看演示链接jsfiddle

由于某种原因，我必须在两个动画上分开两个效果，即使它在同一个目标上，但我希望两个效果同时播放，我应该怎么做？

 $(document).ready(function(){
 $(".box").animate({width:10},"slow");
 $(".box").animate({left:100},"slow");
});

css

.box {
background-color: #f00;
width:100px;
height:100px;
position:relative;
}

html

<div class="box" ></div>

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

如果您想保持其位置，请改用 margin-left

$(".box").animate({'width': '10px' , 'margin-left': '100px'},"slow");

见演示HERE

【讨论】：

不错 - 使用width:200px; 用于.box css 类，效果会更准确。
@Prog 任何宽度，你将使用它肯定会做出同样的事情。你想做什么？
@KentWood .animate() 会让你等到第一个动画完成
@Mohamed-Yousef 所以，你的意思是不可能同时在同一个目标上播放多动画？
@KentWood 是的，人还没有办法做到这一点.. 直到 jquery 为我们解决这个问题:)