Question

我的代码可以将不透明度从0到1设置为页面上的多个元素。（共7个）我需要按特定顺序启动每个元素动画，如下所示：元素＃3，元素＃4，元素＃1，元素＃6，元素＃7，元素＃2，元素＃5。

（每个元素包含3个子元素，这就是为什么在代码中我有22个元素。一旦第一个元素动画完成，第二个动画应该开始。

问题是时机已关闭：

setTimeout(function(){
var delay = 200;
$('.block-item:lt(22)').each(function(){
    $(this).delay(delay)
    .css({ opacity: 0.0 })
    .animate({
        opacity : 1.0
   },600);
   delay += 300;
});
}, 2000);

Answer 1

CodePen Demo

您可以在对象中设置延迟，然后以某种方式将它们绑定到元素。您可以使用元素的ID，或者像我一样使用它的类。

这些是第一，第三，第二顺序的一些示例延迟。

var delays = {
  'first': 200,
  'second':1500,
  'third': 300
}

此代码获取每个元素的第一个类名，并给出上述延迟。

$('.things div').each(function(key, element){
    var className = element.className.split(' ')[0];

    $(this).delay(delays[className] || 500)
    .css({ opacity: 0.0 })
    .animate({
        opacity : 1.0
   },600);
});

您的元素只需要有一个链接到delays对象的类。

<div class="first">...</div>
<div class="second">...</div>
<div class="third">...</div>

Answer 2

您可以使用递归函数，并在动画结束时从回调中调用它。按照您希望它们设置动画的顺序创建元素ID的数组。调用动画功能并为数组中的第一项设置动画。动画结束后，从阵列中删除刚刚完成动画的项目。然后检查数组中是否还有项目，递归调用动画函数。

$(document).ready(function() {
    // set up your array
    var order = ['block-item-2','block-item-4','block-item-3','block-item-1','block-item-5'];
    // create your function 
    function anim() {
        var id = '#' + order[0];
        // animate the first item in the array
        $(id).animate({ opacity: 0 }, 600, function() {
            // in the callback remove the item you just animated
            order.shift();
            // if there are still items, call anim() again
            if(order.length) anim();
        });
    }
    // Initial call of anim to kick things off
    anim();
});

这是一个jsFiddle - http://jsfiddle.net/znSBh/5/

jquery以不同顺序动画元素

2 个答案:

CodePen Demo