1

我有一些 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>

非常感谢您对此的任何帮助:)

4

6 回答 6

3

你可以试试这样：-

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();

演示

于 2013-06-06T14:44:20.073 回答
2

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

$('.field').animate({
    marginTop: "0"
}, 600, function () {
    i1.animate({
        "opacity": 1
    }, function () {
        i2.animate({
            "opacity": 1
        },etc...);
于 2013-06-06T14:43:48.637 回答
2

在不泄漏变量并且不必添加新的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);
});

演示：http: //jsfiddle.net/FbGwQ/2/

于 2013-06-06T15:06:47.277 回答
0

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

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/

于 2013-06-06T15:30:53.770 回答
0

尝试使用 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
        });
    });
});
于 2013-06-06T14:40:47.263 回答
0

我喜欢使用 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);
  });
});

您还可以获得使用特定类而不是单独指定它们的额外好处。这使一切更通用，更易于维护。您可以简单地将另一个 div 添加到您的 HTML 中，而无需编辑 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);
  });
});

这是一个演示

于 2013-06-06T14:54:11.103 回答