загрузить Div затем задержать загрузку следующего в JQuery - PullRequest
2 голосов
/ 01 августа 2011

Привет, у меня есть галерея, в которой остались плавающие элементы div, изображения - это фоны для каждого элемента div, я хочу, чтобы каждое изображение загружалось с небольшой задержкой, поэтому сначала загрузите, затем подождите, скажем, 5 секунд, затем второе и т. Д. В некоторых случаях я видел его на сайтах, но продолжаю забывать добавлять его в закладки, если это возможно в jquery.

Я попробовал запрос, но я могу заставить весь лот исчезать только тогда, когда я хочу, чтобы каждый div исчезал

так с этим кодом:

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

дочерние элементы будут постепенно исчезать по одному. сначала задержка 5 секунд, затем следующая и т. д.

спасибо

Ответы [ 4 ]

3 голосов
/ 01 августа 2011

Вы можете использовать

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

демо на http://jsfiddle.net/gaby/eGWx9/1/

2 голосов
/ 01 августа 2011

Мне нравится @Gaby aka G. Petrioli отвечает лучше всех, но я все равно оставлю свой пост.

Демонстрация в реальном времени

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;
        }
    });
}
1 голос
/ 01 августа 2011

Сначала установите всех своих детей на скрытых .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/

0 голосов
/ 01 августа 2011

jQuery.delay ()

Например:

<script>
    $("button").click(function() {
      $("div.first").slideUp(300).delay(800).fadeIn(400);
      $("div.second").slideUp(300).fadeIn(400);
    });
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...