JQuery Image Fade In One By One?

Question

Мне было интересно, как я могу использовать JQuery, чтобы мои изображения появлялись (sorta fade in) один за другим. В основном у меня есть сетка изображений, и я хочу, чтобы они появлялись один за другим при загрузке страницы.

Вот мой код ниже:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
     <div id="images"> 
       <a href="#"><img src="" alt=""/></a> 
       <a href="#"><img src="" alt=""/> 
       <a href="#"><img src="" alt=""/></a> 
       <a href="#"><img src="" alt=""/></a> 
       <a href="#"><img src="" alt=""/></a> 
     </div> 

     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('#images').find('a').fadeIn(500); 
      }); 
     </script> 

Как я могу добиться этого с помощью Jquery?

Спасибо! =]

Answer 1

Попробуйте следующий код:

$("img").each(function(idx){ 
    $(this).delay(100*idx).fadeIn(500); 
}); 

FadeIn каждого изображения начнет 100мс (100 * IDX) позже, чем в предыдущем.

Вот один из моих страниц, на которых я тестировал эту технику: hexagons apperaring in sequence

Answer 2

Есть несколько способов сделать это discussed here.

В следующем подходе используется "complete" callback, чтобы добавить новое событие - следующее исчезновение не будет начнется до тех пор, пока текущий не завершится, как бы долго он ни занимался. Преимущество (и недостаток) такого подхода заключается в том, что он откладывает создание/очередность последующих анимаций.

var $elms = $('#images').find('a'); 
$elms.fadeOut(0); 

var elms = $.makeArray($elms); // a real array for .shift 
function fadeNext() { 
    // get next element 
    var e = elms.shift(); 
    if (e) { 
     // queue animation, rinse and repeat when it's complete 
     $(e).fadeIn(500, fadeNext); 
    } 
} 
fadeNext(); 

(И corresponding jsfiddle.)