Jquery Image Fade In One By One?

Question

I was wondering how I could use Jquery to make my images appear (sorta fade in) one by one. Basically I have a grid of images, and I want those to appear one by one on page load.

Here is my code below:

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

How can I achieve this using Jquery?

Thanks!! =]

Answer 1

Try the following code:

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

The fadeIn of each image will start 100ms (100*idx) later than the previous.

Here is one of my pages where I tested this technique: hexagons apperaring in sequence

Answer 2

There are a few ways to do this discussed here.

The following approach uses the "complete" callback to add a new event - the next fade won't start until the current one finishes, however long that takes. An advantage (and disadvantage) of an approach like this is it defers creating/queuing subsequent animations.

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();

(And the corresponding jsfiddle.)