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

195

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

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

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

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

来源

2009-08-09 Jakub Arnold

动画不同的CSS属性时，我有一个真正的问题。这个问题看起来很老，我把它放在JSFiddle中，似乎两种方法都有效。这仍然是相关的？ http://jsfiddle.net/AVsFe/ – valk 2013-10-21 19:57:18

在当前的jQuery中，我相信自jQuery 1.4以来，上面的代码会同时执行动画，因为fx队列被附加到您调用.animate（）的元素上，而不是全局队列。 – 2014-12-05 18:39:41

呃......你试过了吗？如果你使用你在那里的确切代码，为了理解'animate（）'是如何工作的，它们应该同时运行。 – chaos 2009-08-09 12:36:43

390

是的！

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

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

来源

2011-01-17 23:31:43 Joshua

+11

感谢你，不知道'队列'变量！ – dotty 2011-07-01 11:03:33

我可以问一下将函数传递给jQuery的目的是什么？ – pilau 2013-05-05 10:13:37

@pilau当文档准备就绪时它将被执行。这是$（document）.ready（function（）{}）的简写形式;并使您能够在您的元素定义之前放置您的JavaScript代码。 – 2013-05-08 17:31:20

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

下面是一些测试代码：

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

来源

2009-08-09 12:38:10

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

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

这最终排队动画。去同时运行它们，你会只用一条线。

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

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

来源

2009-11-03 11:25:57 Waseem

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

动画处理的所有段落左风格的50 和1不透明度（不透明，可见），完成内动画 500毫秒。 它还将做到这一点的队列之外，这意味着它会自动启动，而不等待轮到。
$("p").animate({ 
    left: "50px", opacity: 1 
}, { duration: 500, queue: false }); 

只需添加：queue: false。

来源

2011-04-07 23:35:48 user697709

如何将完整的功能集成在这一个上？：s – Brainfeeder 2013-03-26 08:49:01

看到这个辉煌的博客文章关于在对象中设置动画值..然后你可以使用这些值来动画你喜欢的任何东西，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'); 
       } 
      }); 
     }

来源

2012-08-16 23:19:26

无效链接，请访问https://web.archive.org/web/20150101065437/http://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-元素值＃ – PhiLho 2015-10-22 16:38:09

虽然这是真的，连续通话动画会给他们是在同一时间运行的外观上来看，潜在的事实是它们是非常接近并行的独特动画。

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

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

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

干杯，安东尼

来源

2017-02-11 23:01:56 Borgboy

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

回答

相关问题