Fade One By One

Fade a collection of items one by one in order.

by elclanrs

HTML

<img src="http://placekitten.com/200/303" />
<img src="http://placekitten.com/200/305" />
<img src="http://placekitten.com/200/310" />
<img src="http://placekitten.com/200/320" />
<img src="http://placekitten.com/200/309" />

CSS

img { 
    height: 200px;
    display: none;
}

JavaScript

$.fn.fadeAll = function (ops) {
  var 
  o = $.extend({
    delay: 500,
    speed: 500,
    ease: 'swing' // Other requires easing plugin
  }, ops),
  $el = this
  for (var i=0, d=0, l=$el.length; i<l; i++, d+=o.delay)
    $el.eq(i).delay(d).fadeIn(o.speed, o.ease);
  return $el
}

$('img').fadeAll();