0

我有将不透明度从 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);
4

2 回答 2

0

CodePen 演示

您可以在对象中设置延迟，然后以某种方式将它们绑定到元素。您可以使用元素的 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>
于 2013-07-12T18:24:22.747 回答
0

您可以使用递归函数并在动画完成时从回调中调用它。按照您希望它们动画的顺序创建一个元素 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/

于 2013-07-12T18:33:42.373 回答