Fade One By One

Fade a collection of items one by one in order.

by shapeshifta

HTML

<div id="images">
    <img class="hidden" height="150" src="http://i0006.photobucket.com/albums/0006/findstuff22/Best%20Images/Art%20best%20images/a58b76f2.jpg" alt="" />
        <img class="hidden" height="150" src="http://i275.photobucket.com/albums/jj309/orient_sky2612/73436579.jpg" alt="" />
        <img class="hidden" height="150" src="http://i685.photobucket.com/albums/vv214/Johnny_938/Arte_retro.jpg" alt="" />
        <img class="hidden" height="150" src="http://i228.photobucket.com/albums/ee212/BellaDotka/art%20abstract/Art/2439591kza1nvn384.jpg" alt="" />
    <img class="hidden" height="150" src="http://i0006.photobucket.com/albums/0006/findstuff22/Best%20Images/Art%20best%20images/a58b76f2.jpg" alt="" />
        <img class="hidden" height="150" src="http://i275.photobucket.com/albums/jj309/orient_sky2612/73436579.jpg" alt="" />
        <img class="hidden" height="150" src="http://i685.photobucket.com/albums/vv214/Johnny_938/Arte_retro.jpg" alt="" />
        <img class="hidden" height="150" src="http://i228.photobucket.com/albums/ee212/BellaDotka/art%20abstract/Art/2439591kza1nvn384.jpg" alt="" />
    <img class="hidden" height="150" src="http://i0006.photobucket.com/albums/0006/findstuff22/Best%20Images/Art%20best%20images/a58b76f2.jpg" alt="" />
        <img class="hidden" height="150" src="http://i275.photobucket.com/albums/jj309/orient_sky2612/73436579.jpg" alt="" />
        <img class="hidden" height="150" src="http://i685.photobucket.com/albums/vv214/Johnny_938/Arte_retro.jpg" alt="" />
        <img class="hidden" height="150" src="http://i228.photobucket.com/albums/ee212/BellaDotka/art%20abstract/Art/2439591kza1nvn384.jpg" alt="" />
</div>

CSS

.js .hidden{ display: none }

JavaScript

$('body').addClass('js');

$.fn.fade1by1 = function(options) {
    var settings = $.extend({}, $.fn.fade1by1.defaults, options),
        $this = $(this);

    for (var i = 0, d = 0, l = $this.length; i < l; i++, d += settings.delay) {
        $this.hide().removeClass('hidden').eq(i).delay(d).fadeIn(settings.speed, settings.ease);
    }
};

$.fn.fade1by1.defaults = {
    'speed': 500,
    'delay': 500,
    'ease': 'linear'
};

$('#images img').fade1by1({ speed: 400, delay: 200 });