就在这里！

$(function () {
    $("#first").animate({
       width: '200px'
    }, { duration: 200, queue: false });

    $("#second").animate({
       width: '600px'
    }, { duration: 200, queue: false });
});

那将同时运行是的。如果你想同时在同一个元素上运行两个动画怎么办？

$(function () {
    $('#first').animate({ width: '200px' }, 200);
    $('#first').animate({ marginTop: '50px' }, 200);
});

这最终使动画排队。要同时运行它们，您只需使用一行。

$(function () {
    $('#first').animate({ width: '200px', marginTop:'50px' }, 200);
});

有没有其他方法可以同时在同一个元素上运行两个不同的动画？

我相信我在 jQuery 文档中找到了解决方案：

将所有段落设置为左侧样式为 50，不透明度为 1（不透明，可见），在 500 毫秒内完成动画。它也会在队列外执行，这意味着它会自动启动而无需等待轮到它。

$( "p" ).animate({
  left: "50px", opacity: 1
}, { duration: 500, queue: false }); 

只需添加：queue: false。

如果您按原样运行上述程序，它们将显示为同时运行。

下面是一些测试代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function () {
    $('#first').animate({ width: 200 }, 200);
    $('#second').animate({ width: 600 }, 200);
});
</script>
<div id="first" style="border:1px solid black; height:50px; width:50px"></div>
<div id="second" style="border:1px solid black; height:50px; width:50px"></div>

虽然对 animate 的连续调用确实会呈现它们同时运行的外观，但潜在的事实是它们是非常接近并行运行的不同动画。

为了确保动画确实同时运行，请使用：

$(function() {
    $('#first').animate({..., queue: 'my-animation'});
    $('#second').animate({..., queue: 'my-animation'});
    $('#first,#second').dequeue('my-animation');
});

可以将更多动画添加到“我的动画”队列中，并且所有动画都可以启动，前提是最后一个动画出队。

干杯，安东尼