如何同时运行多个jQuery动画?
因为我们两者之间存在差异,我希望它们能够在同一时间运行。 这是代码:
$(selector1).animate({ height: '670' }, 2000, function() { // Animation complete. }); $(selector2).animate({ top: '670' }, 2000, function() { // Animation complete. });
使用queue:false
。 你可以在这里看到完整的文档 。
$(selector1).animate({ height: '670' }, { duration: 2000, queue: false, complete: function() { /* Animation complete */ } }); $(selector2).animate({ top: '670' }, { duration: 2000, queue: false, complete: function() { /* Animation complete */ } });
文档:
添加了.animate(properties,options)版本:1.0
properties动画将移向的CSS 属性的映射。
options要传递给方法的其他选项的映射。 支持的键:
duration:
确定动画运行duration:
的字符串或数字。
easing:
一个字符串,指示要用于转换的缓动函数。
complete:
动画完成后调用的函数。
step:
在动画的每个步骤之后调用的函数。
queue:
一个布尔值,指示是否将动画放在效果队列中。 如果为false,则动画将立即开始。 从jQuery 1.7开始,queue选项也可以接受一个字符串,在这种情况下,动画会被添加到该字符串所代表的队列中。
specialEasing:
由属性参数定义的一个或多个CSS属性及其相应的缓动函数的映射(添加1.4)。
使用队列变量作为假…
$(function () { $("selector1").animate({ height: '200px' }, { duration: 2000, queue: false }); $("selector2").animate({ height: '600px' }, { duration: 2000, queue: false }); });
您可以创建一个选择器表达式来选择两个元素,请参见此处的工作示例: DEMO 。
HTML
Blah Bleh
使用Javascript
function anim() { $('#blah, #bleh').animate({ height: '670' }, 2000, function() { // Animation complete. }); } $(function(){ $('#btn').on('click', anim); });
虽然对animate的连续调用确实会给出它们同时运行的外观,但潜在的事实是它们是非常接近并行运行的独特动画。
为了确保动画确实在同时运行,请使用:
$(function() { $('selector1').animate({..., queue: 'selector-animation'}); $('selector2').animate({..., queue: 'selector-animation'}).dequeue('selector-animation'); });
可以将更多动画添加到“选择器 – 动画”队列中,并且可以在最后一个动画出列的情况下启动所有动画。
干杯,安东尼