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

时间:2011-07-31 22:28:55

标签: javascript jquery css xhtml

嗨我有一个画廊已经离开浮动的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秒,然后是下一个等等。

感谢

4 个答案:

答案 0 :(得分:3)

您可以使用

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

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

答案 1 :(得分: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;
        }
    });
}

答案 2 :(得分:1)

首先将您的所有孩子设置为隐藏.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/

答案 3 :(得分:0)

jQuery.delay()

例如:

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