jQuery FadeIn вложенные изображения одно за другим

Привет, мастера JQuery, мне нужна ваша помощь, у меня есть несколько div 


<div class="post">
    <div class="image-div">
         <img src="img" />
    </div>
</div>



<div class="column">
    <div class="image-div">
        <img src="img" />
    </div>
</div>



<div class="sidebar">
    <div class="image-div">
         <img src="img" />
    </div>
</div>



<div class="footer">
    <div class="image-div">
        <img src="img" />
    </div>
</div>
с изображениями (изображения скрыты с помощью css) в документе, и я хочу, чтобы изображения fadeIn в div, s 1 после 1 с задержкой 500 мс и когда все изображения являются обратным вызовом fadeIn оповещение завершено, пожалуйста, сделайте это с помощью небольшого кода jQuery. Спасибо.


javascript jquery delay fadein
person Anjum    schedule 23.03.2011    source источник
comment
почти точная копия задержки исчезновения изображения Jquery на X   -  person Groovetrain    schedule 23.03.2011
comment
@Groovetrain есть только один класс css, применимый ко всем моим div, s, в этом разница между   -  person Anjum    schedule 23.03.2011

Ответы (1)


arrow_upward
5
arrow_downward 

$("div.image-div").each(function(index) {
    $(this).delay(400*index).fadeIn(300);
});

Проверьте рабочий пример на http://jsfiddle.net/Xc6jn/3/.

person Hussein    schedule 23.03.2011
comment
delay() выглядит как полезная функция, нет необходимости в обратных вызовах - person Mark; 23.03.2011
comment
@Hussein Спасибо, он отлично работает для меня с некоторыми модификациями, такими как я хочу, чтобы изображения исчезали, а не div, s, и обратный вызов для добавления класса .done в div, когда его изображение исчезает в нем. - person Anjum; 23.03.2011
comment
@anjum Чтобы исчезать изображения, а не элементы div, просто замените селектор на $("div.image-div img"). Вы можете поместить свой обратный вызов в функцию fadeIn, например fadeIn(300, function(){...}). Если вам нужно что-то еще помимо того, что было задано в вопросе, пожалуйста, начните другой вопрос. - person Hussein; 23.03.2011
comment
@Hussein, я решил эту проблему, но я хочу, чтобы addClass выполнялся для каждого элемента div, в котором есть затухание изображения jsfiddle.net/Xc6jn/ 11 - person Anjum; 23.03.2011
comment
@anjum, ты уже добавляешь класс. Я дал классу done свойство синей границы, чтобы вы могли его видеть. jsfiddle.net/Xc6jn/13 - person Hussein; 23.03.2011
comment
@Hussein, когда я перезагружаю страницу своего сайта и когда первое изображение готово, класс постепенного добавления добавляется ко всем div, я хочу добавить класс в каждый div - person Anjum; 23.03.2011
comment
@Hussein я решил эту $(".image-div img").each(function(index) { $(this).delay(1000*index).fadeIn(500, function() { $('.image-div').eq(index).addClass('done'); }); }); ознакомьтесь с рабочим примером здесь jsfiddle.net/Xc6jn/18 - person Anjum; 23.03.2011
comment
Ок, я не знал, что вы имеете в виду. Рад, что это сработало для вас. - person Hussein; 23.03.2011