我需要在 for 循环中对不同对象进行 jQuery 动画排序。
Javascript:
$(document).ready(function(){
$('#o1').click(function() {
for (var a=0; a<3; a++){
console.log('a = ' + a);
// ... some calculations
animateCard($('#o1'));
animateCard($('#o2'));
// ... some calculations
}
});
});
// In reality this function will have object and target inputs
function animateCard(card){
if (card.offset().left == 400) card.animate({left: 0}); // move home
else card.animate({left: 400});
}
HTML:
<div id="o1" class="card green">Click me</div>
<div id="o2" class="card red"></div>
<div id="p1" class="card gray"></div>
<div id="p2" class="card gray"></div>
这是 JSFiddle 链接: https://jsfiddle.net/fu3mte6u/1/
- 我明白了:
- 循环已启动,
- object1, object2, .. nth 对象一起移动到它们的位置
- 直到他们到达第一个目的地,所有迭代都会循环进行(控制台日志显示)
在 JSFiddle 示例中,如果单击绿色方 block - 动画将启动。而一动之后就会停止。如果您再次单击绿色矩形,它将执行第二次迭代所需的动画(但所有循环迭代将在这一举动中再次消失)
- 期望的结果:
- 迭代一次 - 将对象 1 移动到位置 1,然后将对象 2 移动到位置 2,然后....第 n 到第 n 个位置
- 迭代两次 - 再次将对象 object1 移动到其他位置,然后移动 object2,然后 .... 第 n 个 等等... (不要一起制作动画,而是一步一步制作)
对于 JSFiddle 示例,它会是这样的 - 第一个绿色矩形向右移动,然后红色矩形向右移动,然后 进行下一次迭代,绿色迭代返回到其原始位置,然后红色迭代返回,并且在第三次迭代时,红色将紧随绿色迭代之后。
随着迭代次数的增加,移动对象及其目的地正在发生变化,并且在计算之间插入动画,我无法为每个动画编写回调函数()。 据我了解,队列适用于对一个对象的动画进行排序。
那么,也许您可以帮助在循环中对多个对象的动画进行排序?
最佳答案
这可以通过在文档上排列动画来完成。
更新的代码:
$(document).ready(function () {
$('#o1').click(function () {
for (var a = 1; a <= 3; a++) { //Loop to go through each element
// ... some calculations
animateCard($('#o1'));
// ... even more calculations
animateCard($('#o2'));
animateCard($('#o3'));
}
});
});
// in reality this function will have object and target inputs
function animateCard(card) {
$(document).queue(function () {
var self = this;
if (card.offset().left == 400)
card.animate({
left: 0
}, function () { $(self).dequeue(); });
else
card.animate({
left: 400
}, function () { $(self).dequeue(); }); // move home
});
}
已更新jsFiddle
关于javascript - jQuery 循环中的多个对象动画序列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36449517/