Using delay() to show elements in sequence fails
I have a button and an unordered list with its items hidden:
- <button>Show</button>
- <ul id="letters">
- <li>A</li>
- <li>B</li>
- <li>C</li>
- </ul>
The
CSS:
- #letters li {
- display: none;
- }
I want to show elements in sequence o button click.
My
script:
- var showLetters = function () {
- var letter = $('#letters').find('li');
- letter.each(function() {
- $(this).delay(2000).fadeIn("show");
- });
- }
- $('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?