Javascript 如何同时运行两个jQuery动画？

可以在两个不同的元素上同时运行两个动画吗？我需要这个问题的反面

我需要这样做

$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);

---

但是同时运行这两个。我唯一能想到的是对每个动画使用

setTimeout

一次，但我认为这不是最好的解决方案。

如果按原样运行上述内容，它们将显示为同时运行

下面是一些测试代码：

<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>

$（函数（）{
$（'#first'）。设置动画（{width:200}，200）；
$（#second'）。设置动画（{width:600}，200）；
});

将同时运行的是。 如果要在同一元素上同时运行两个动画，该怎么办

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

这将导致动画排队。 要同时运行它们，您只需使用一行代码

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

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

有

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

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

---

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

将所有段落设置为左侧样式的动画 为50，不透明度为1（不透明， 可见），完成动画 500毫秒内它也会 在队列外做，就是说 将自动启动，无需 等待轮到它

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

---

只需添加：

queue:false

即可查看这篇关于在对象中设置值动画的精彩博文。。然后，您可以使用这些值100%同时设置任何您喜欢的动画

我用它来滑入/滑出：

        slide : function(id, prop, from, to) {
            if (from < to) {
                // Sliding out
                var fromvals = { add: from, subtract: 0 };
                var tovals = { add: to, subtract: 0 };
            } else {
                // Sliding back in
                var fromvals = { add: from, subtract: to };
                var tovals = { add: from, subtract: from };
            }

            $(fromvals).animate(tovals, {
                duration: 200,
                easing: 'swing', // can be anything
                step: function () { // called on every step
                    // Slide using the entire -ms-grid-columns setting
                    $(id).css(prop, (this.add - this.subtract) + 'px 1.5fr 0.3fr 8fr 3fr 5fr 0.5fr');
                }
            });
        }

幻灯片：功能（id、道具、起点、终点）{ 如果（从<到）{ //滑出 var FROMVAL={add:from，subtract:0}； var-tovals={add:to，subtract:0}； }否则{ //滑回 var FROMVAL={add:from，subtract:to}； var-tovals={add:from，subtract:from}； } $（fromvals）。设置动画（tovals{ 持续时间：200， 放松：'摆动'，//可以是任何东西 步骤：在每个步骤上调用函数（）{// //使用整个-ms网格列设置进行滑动 $（id）.css（prop，（this.add-this.subtract）+'px1.5fr0.3fr8fr3fr5fr0.5fr'）； } }); }

---

虽然连续调用animate会显示出它们同时运行的外观，但基本事实是它们是非常接近并行运行的不同动画

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

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

进一步的动画可以添加到“我的动画”队列中，只要最后一个动画退出队列，所有动画都可以启动

干杯，

---

安东尼

把我的答案贴出来帮助别人，但排名靠前的答案并没有解决我的疑虑

当我实现以下[从顶部答案]时，我的垂直滚动动画只是来回抖动：

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

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

我提到：它解决了我的问题，即“语法”部分：

setInterval（函数、毫秒、参数1、参数2等）

使用形式为

{duration:200，queue:false}

的参数强制将持续时间设置为零，它只查看参数以获得指导

长短不一，这里是我的代码，如果你想了解它的工作原理，请阅读链接或分析间隔预期参数：

var $scrollDiv = '#mytestdiv';
var $scrollSpeed = 1000;
var $interval = 800;

function configureRepeats() {
   window.setInterval(function () {
       autoScroll($scrollDiv, $scrollSpeed);
   }, $interval, { queue: false });
};

其中“autoScroll”是：

    $($scrollDiv).animate({
        scrollTop: $($scrollDiv).get(0).scrollHeight
    }, { duration: $scrollSpeed });

    //Scroll to top immediately 
    $($scrollDiv).animate({
        scrollTop: 0
    }, 0);

---

快乐编码

谢谢，我不知道这个

队列
变量！我可以问一下将函数传递给jQuery的目的吗？@pilau它将在文档准备好后执行。这是$（document.ready（function（）{}）的简写形式；并允许您将javascript代码放在元素定义之前。是的，您可以将队列设置为true/false，或以这种方式给它一个字符串（队列名称），这两个动画使用相同的计时器…您将如何向其中添加onComplete？如何在这一个上集成complete函数？：sDead链接，在Erm找到的。。。你试过了吗？根据我对
animate（）。添加/编辑以查看代码在设置不同CSS属性的动画时，我遇到了一个真正的问题。这个问题看起来很老，我把它放在JSFiddle中，似乎两种方法都有效。这是否仍然相关？在当前的jquery中，我相信从jquery 1.4开始，上面的代码会同时对这两个元素进行动画处理，因为fx队列会附加到您调用的元素上。animate（）不是一个全局队列。上面的jsbin已经死了。jsfiddle中的一个，它可以工作：