有可能同时在两个不同的元素上运行两个动画吗?我需要这个问题的反面Jquery排队动画。
我需要做这样的事情……
$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);
但要同时处理这两件事。我能想到的唯一方法是为每个动画使用一次setTimeout，但我不认为这是最好的解决方案。
当前回答
我相信我在jQuery文档中找到了解决方案:
动画所有段落为左样式 50度，不透明度为1(不透明， 可见)，完成动画 在500毫秒之内。它也会 在队列外做，意思是吗 将自动启动 等待轮到它。 $("p").animate({ 左:“50px”，不透明度:1 }， {duration: 500, queue: false});
只需添加:queue: false。
其他回答
会同时运行是的。 如果你想在同一个元素上同时运行两个动画呢?
$(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 });
});
虽然连续调用动画会让它们看起来是同时运行的，但潜在的真相是它们是非常接近并行运行的不同动画。
为了确保动画确实在同一时间运行，使用:
$(function() {
$('#first').animate({..., queue: 'my-animation'});
$('#second').animate({..., queue: 'my-animation'});
$('#first,#second').dequeue('my-animation');
});
进一步的动画可以添加到'my-animation'队列中，所有的动画都可以被初始化，只要最后一个动画从队列中出来。
欢呼, 安东尼
我相信我在jQuery文档中找到了解决方案:
动画所有段落为左样式 50度，不透明度为1(不透明， 可见)，完成动画 在500毫秒之内。它也会 在队列外做，意思是吗 将自动启动 等待轮到它。 $("p").animate({ 左:“50px”，不透明度:1 }， {duration: 500, queue: false});
只需添加:queue: false。
如果您按原样运行上述程序，它们看起来将同时运行。
下面是一些测试代码:
<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>
