jQuery Image Fade Sequence?

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

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

Answer 2

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

<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 3

Вы также можете приглушить их последовательно, задерживая эффект для каждого последующего изображения как так (примечание: я м с помощью 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; 
     }); 

    });