Question

嗨我有一个画廊已经离开浮动的div，图片是每个div的背景，我想要的是每个图片加载稍有延迟所以首先加载然后等待5秒然后第2等在一个序列中，我已经在网站上看到了它，但是如果可能的话，在jquery中忘记给它添加书签。

我确实尝试过查询，但是当我想让每个div淡入时，我只能得到很多东西。

所以使用此代码：

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

子元素将一次淡入一个。第一个然后延迟5秒，然后是下一个等等。

感谢

Answer 1

您可以使用

$('#parent .child')
    .hide()
    .each(function(index){
        var _this = this;
        setTimeout( function(){ $(_this).fadeIn(); }, 5000*index );
    });

演示http://jsfiddle.net/gaby/eGWx9/1/

Answer 2

我喜欢@Gaby又名G. Petrioli回答最好的，但不管怎么说我发帖了。

<强> Live Demo

<强> CSS

.child{display:none;}

<强> JS

showElements($('#parent'));

function showElements(element){
    element.children('div').each(function(){
        if($(this).is(':hidden')){
            $(this).fadeIn();
            setTimeout(function(){showElements(element)}, 1000);  
            return false;
        }
    });
}

Answer 3

首先将您的所有孩子设置为隐藏.child {display:none;}

然后以递归方式淡化它们：

function fade_in(e){
    $(e).fadeIn('slow',function(){
        if($(e).next().length > 0){
            setTimeout(function(){fade_in($(e).next());},5000);
        }
    });
}
fade_in($('.child:first-child'));

http://jsfiddle.net/B7Qgk/1/

Answer 4

jQuery.delay()

例如：

<script>
    $("button").click(function() {
      $("div.first").slideUp(300).delay(800).fadeIn(400);
      $("div.second").slideUp(300).fadeIn(400);
    });
</script>

然后在jquery中加载div然后延迟加载

4 个答案: