Adding a delay or Pause before starting the effects on the first element in Jquery

Question

HTML:

  <div id="main-trannies" class="fivecol last">
  <h2>What I am is:</h2>
  <ul class="js_transitions">
    <li>awesome</li>
    <li>egotistical/li>
    <li>not conceited</li>
    <li class="final"><h3>Da Best</h3></li>
  </ul>
</div>

JS using Jquery:

$(document).ready(function() {
  $(".js_transitions li").each(function(i) {
$(this).hide().fadeIn(i*5000);
  });
});

I know there is a delay, but where do you put .delay when you just want to pause the first element in an array until like, 10 seconds (100000) after ready, or page load. I want these li elements to just fadeIn after 10 seconds like how credits in a movie kind of come in... that was the original idea, but i'll take them just appearing and sticking.

Lasly, I know some guys use display:none for hiding in css, but i want to make sure non-js browser at least display something.

My jquery fu is weak, at best... so let me know if i'm doing anything wrong thus far. Unlike most of you, i don't have a frail geekgo (ego).

Answer 1

use delay

$(function(){
 $(".js_transitions li").hide();
 $(".js_transitions li").delay(10000).each(function(i) {
 $(this).fadeIn(i*5000);
  });
});

here is the fiddle http://jsfiddle.net/T5QsA/10/