Using delay() to show elements in sequence fails

Using delay() to show elements in sequence fails

I have a button and an unordered list with its items hidden:

  1. <button>Show</button>
  2. <ul id="letters">
  3.   <li>A</li>
  4.   <li>B</li>
  5.   <li>C</li>
  6. </ul>


The CSS:

  1. #letters li {
  2.   display: none;
  3. }
I want to show elements in sequence o button click.

My script:
  1. var showLetters = function () {
  2.   var letter = $('#letters').find('li');

  3.   letter.each(function() {
  4.     $(this).delay(2000).fadeIn("show");
  5.   });
  6. }

  7. $('button').on('click', showLetters);

The script fades the  letters in but NOT in sequence. There is s jsFiddle HERE.

Why? What is a viable alternative?