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

Question

是否可以同时在两个不同的元素上运行两个动画？我需要这个问题的反面Jquery queueing animations。

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

$('#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

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

将所有段落动画到左侧样式 50 和不透明度 1（不透明， 可见），完成动画 在 500 毫秒内。 它也会 在队列之外做，意思是 会自动启动 等待轮到它。

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

只需添加：queue: false。

Answer 4

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

这是一些测试代码：

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

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

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

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

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

干杯， 安东尼

Answer 6

请参阅这篇关于为对象中的值设置动画的精彩博客文章。然后您可以使用这些值为您喜欢的任何内容设置动画，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 7

发布我的答案以帮助某人，评分最高的答案并没有解决我的疑虑。

当我实现以下 [from the top answer] 时，我的垂直滚动动画只是来回抖动：

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

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

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

setInterval(函数, 毫秒, param1, param2, ...)

让我的 { 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);

编码愉快！