如何同时运行两个jQuery的动画？(How to run two jQuery animation

是否有可能在两个不同的元素同时运行两个动画？ 我需要这个问题的另一Jquery的排队动画 。

我需要做这样的事情...

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

但运行在同一时间这两个。 我能想到的唯一的事情将使用setTimeout一次每个动画，但我不认为这是最好的解决办法。

Answer 1:

就在这里！

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

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

Answer 2:

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

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

这结束了排队的动画。 去同时运行它们，你会只用一条线。

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

是否有任何其他的方式来同时运行同一元素在两个不同的动画？

Answer 3:

如果你运行，因为它们上面，就会出现simultaenously运行。

下面是一些测试代码：

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

Answer 4:

我相信我发现了jQuery文档中的解决方案：

动画所有款的50左风格和1（不透明，可见）混浊，完成在500毫秒的动画。 它也将这样做的队列之外，这意味着它会自动启动，而无需等待轮到它 。

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

只需添加： queue: false 。

Answer 5:

看到这个辉煌的博客文章中的对象动画值..然后你可以使用这些值的动画任何你喜欢的，100％的同时！

http://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value/

我用它这样的输入/输出滑动：

        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');
                }
            });
        }

Answer 6:

虽然这是真的，连续通话动画会给他们是在同一时间运行的外观，基本事实是，他们非常接近平行运行不同的动画。

为了确保该动画在同一时间使用确实运行：

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

进一步动画可以被添加到“我的动画”队列，都可以开始提供动画的上一个出队是他们。

欢呼声中，安东尼

文章来源: How to run two jQuery animations simultaneously?