Question

HTML

<div id="slides">  
    <div id="one">Slide 1</div>  
    <div id="two">Slide 2</div>  
    <div id="three">Slide 3</div>  
</div>

CSS

#slides .show{
    display: block;
}
#slides div{
    display: none;
}

Script

var slides = $('#slides').children();

var i = 0;
function play(){
    $(slides[i]).addClass('show');
    setTimeout($(slides[i]).removeClass('show'), 500); /* does nothing */
    i++;
    setTimeout(play, 3000); 
}

play();

I got this and it displays the slide one by one but it doesn’t remove them. Wondering how to set the removeClass to wait for a second before actually removing it.

UPDATED jsfiddle link below

http://jsfiddle.net/WbsxQ/6/

Thanks!

Answer 1

When setTimeout fires your loop has been finished long time ago. Try putting the element slides[i] – into global variable (you don’t need another $ there).

elementToHide = slides[i];
setTimeout(function(){elementToHide.removeClass('show')}, 500);