jquery - FadeIn li after li jquery wont work

Question

I'm making a portfolio grid with a fadeIn effect that fades in li after li (portfolio image after the next one).

I've tried many approaches but it won't work.

(function($){
  $.fn.showdelay = function(){
    var delay = 0;
    return this.each(function(){
      $(this).delay(delay).fadeIn(1800);
      delay += 1000;
    });
  };
})(jQuery);

$(document).ready(function(){
  $('#portfolioslider li').showdelay();
});

How can I fix this?

Many thanks in advance.

Here is the code!

Answer 1

Add a display:none to your #porfolioslider li style:

#portfolioslider li {
    float: left;
    display:none;
}

Living demo: http://jsfiddle.net/rC7Lr/3/

Remember that in order to fadeIn something, it must be hidden first. If it is already visible, what are you going to fade in? :)