Последовательность затухания изображения jQuery?

Question

У меня есть вопрос, касающийся jQuery и исчезновения изображения. У меня есть куча изображений, и я хотел бы постепенно выцветать каждое из них до полной непрозрачности при загрузке страницы. Мой HTML-код ниже:

<div class='mod'>
   <img src='image-src' alt='' />
   <div class='mod-text'>
   <h2>Title</h2>
   <p>Caption</p></div>
</div>

<div class='mod'>
   <img src='image-src' alt='' />
   <div class='mod-text'>
   <h2>Title 2</h2>
   <p>Caption 2</p></div>
</div>

Каждое изображение имеет свои соответствующие заголовок и подпись, которые отображаются один под другим. Я хотел бы, чтобы первое изображение сначала появлялось, а затем появлялось каждое следующее изображение. У кого-нибудь есть идея? У меня есть очень базовое понимание jQuery. Спасибо

Answer 1

Вам нужно будет поставить анимацию в очередь, а затем начать каждую, когда закончится предыдущая:

<img src="..." />
<img src="..." />
<img src="..." />
<img src="..." />

var animations = new Array();
// queue all
$("img").each(function() {
    animations.push($(this));
});

// start animating
doAnimation(animations.shift());

function doAnimation(image) {
    image.fadeIn("slow", function() {
        // wait until animation is done and recurse if there are more animations
        if(animations.length > 0) doAnimation(animations.shift());
    });
}

Answer 2

Вы также можете постепенно увеличивать их, задерживая эффект для каждого последующего изображения следующим образом (примечание: я использую window.load, чтобы гарантировать, что все изображения загружаются перед запуском анимации):

$(window).load(function() {

        var delay = 0;

        $('img').each(function() {
            $(this).delay(delay).fadeIn();
            delay += 150;
        });

    });

Это отлично подходит для наложения анимаций, в отличие от ожидания, пока каждая из них не завершится. Это также может быть рандомизировано так:

$(window).load(function() {

        var delay = 0;

        $('img').sort(function() { return (Math.round(Math.random()) - 0.5); }).each(function() {
            $(this).delay(delay).fadeIn(600);
            delay += 150;
        });

    });

Answer 3

Это, вероятно, не то, что вам нужно реализовать самостоятельно, посмотрите jQuery Cycle Plugin .