Question

我有一些JavaScript根据类名加载一堆单独的元素。但是，我想在每个上加一个1秒的延迟，所以它们都是一个接一个地出现。

所以 i1 首先加载，然后加载 i2 ，等等......

如何使用我的代码实现这一目标？

<script>
jQuery(function($){

var i1 = $(".one"),
i2 = $(".two"),
i3 = $(".three");
i4 = $(".four");
i5 = $(".five");
i6 = $(".six");

$('.field').animate( {
marginTop:"0"
},600, function () {
i1.animate({
"opacity": 1
}),             
i2.animate({
"opacity": 1
}),     
i3.animate({
"opacity": 1
}),     
i4.animate({
"opacity": 1
})      
i5.animate({
"opacity": 1
}),     
i6.animate({
    "opacity": 1
}, 500);
});             

});
</script>

非常感谢您对此提供的任何帮助：）

Answer 1

您可以尝试这种方式： -

HTML

<div class="one slide">1</div> <!-- give some common class all these-->
<div class="two slide">2</div>
<div class="three slide">3</div>
<div class="four slide">4</div>
<div class="five slide">5</div>

JS

var all = $('.slide').get(); //Get all the element to slide into an array.

function animate() {

    var elem = all.shift(); //Remove the top element from the array

   //animate it
    $(elem).animate({
        "opacity": 1
    }, function () {
        if (all.length > 0)
              window.setTimeout(animate, 1000); //set the time out after the delay of 1 sec for next element to animate.
    });
}
animate();

Demo

Answer 2

对于每个元素，在前一个元素的animate方法的回调中设置animate函数。

$('.field').animate({
    marginTop: "0"
}, 600, function () {
    i1.animate({
        "opacity": 1
    }, function () {
        i2.animate({
            "opacity": 1
        },etc...);

Answer 3

如果没有泄漏变量并且必须添加新的class，您可以遍历找到的元素并使用setTimeout来延迟直到下一个。例如：

$(document).ready(function () {
    var i1 = $(".one"),
        i2 = $(".two"),
        i3 = $(".three"),
        i4 = $(".four"),
        i5 = $(".five"),
        i6 = $(".six"),
        iterator = function () {
            var arr = Array.prototype.slice.call(arguments, 0),
                len = arr.length,
                iterate = function (index) {
                    if (index === len) {
                        return;
                    }
                    arr[index].animate({
                        opacity: 1
                    }, 600, function () {
                        setTimeout(function () {
                            iterate(++index);
                        }, 1000);
                    });
                };
            iterate(0);
        };

    iterator(i1, i2, i3, i4, i5, i6);
});

DEMO： http://jsfiddle.net/FbGwQ/2/

Answer 4

尝试使用jQuery .delay（），它允许您延迟队列中跟随它的函数的执行。

http://api.jquery.com/delay/

<强>更新：

使用jsFiddle示例：http://jsfiddle.net/DylanNunns/su8jp/2/

jQuery(function ($) {
    var i1 = $(".one"),
        i2 = $(".two"),
        i3 = $(".three");
    i4 = $(".four");
    i5 = $(".five");
    i6 = $(".six");

    $('.field').animate({
        marginTop: "0"
    }, 600, function () {
        i1.delay(1000).animate({
            "opacity": 1
        }),
        i2.delay(2000).animate({
            "opacity": 1
        }),
        i3.delay(3000).animate({
            "opacity": 1
        }),
        i4.delay(4000).animate({
            "opacity": 1
        }),
        i5.delay(5000).animate({
            "opacity": 1
        }),
        i6.delay(6000).animate({
            "opacity": 1
        });
    });
});

Answer 5

我喜欢使用jQuery的each方法和delay来帮助解决这个问题，因为它为您提供了可用于设置延迟的元素的索引。

jQuery(function () {
  var animation_items = [
        ".one", ".two", ".three", ".four", ".five", ".six"
      ];

  $.each(animation_items, function(index, item) {
    $(item).delay(index * 1000).animate({
      opacity: 1
    }, 500);
  });
});

您还可以获得使用特定类的额外奖励，而不是单独指定它们。这使得一切更通用，更易于维护。您只需在HTML中添加另一个div，而无需编辑JavaScript。

<div class="fade_in"></div>
<div class="fade_in"></div>
<div class="fade_in"></div>


jQuery(function () {
  var delay = 1000;

  $('.fade_in').each(function(index, item) {
    $(item).delay(index * 1000).animate({
      opacity: 1
    }, 500);
  });
});

这是demo

Answer 6

我想我宁愿使用一些递归并使用回调来实现更清晰的实现（在我看来......）

var oneByOne = function($el) {
    $el.fadeIn(600, function() {
        if (!$el.next().length == 0)
            oneByOne($el.next());
    });
};
$first = $('#one-by-one').children().first();
oneByOne($first);

http://jsfiddle.net/mikecmpbll/sbwMx/

或者，仍然使用递归但是使用项目数组：

var oneByOne = function(arr) {
    $el = $(arr.shift());
    $el.fadeIn(600, function() {
        if (!$el.next().length == 0)
            oneByOne(arr);
    });
};
arr = $("#one-by-one").children().get();
oneByOne(arr);

http://jsfiddle.net/mikecmpbll/sbwMx/1/

一个接一个地加载元素 - 简单的jQuery

6 个答案:

HTML

JS

Demo