I need to display playing cards when a button is pushed. It should display one card every three seconds. I used a setTimeout for it, but it is not pausing in between. Besides not pausing, the code works perfectly.
<code>function diamonds() {
for (i = 0; i < deck.length; i++) {
if (deck[i].suit == "Diamonds") {
setTimeout(showCard(), 3000);
}
}
}
function showCard(){
var $d = $("<div>");
$d.addClass("current_hand")
.appendTo("#my_hand");
var c = deck[i];
$("<img>").attr('alt', c.name + ' of ' + c.suit )
.attr('title', c.name + ' of ' + c.suit )
.attr('src', 'images/cards/' + c.suit + '/' + c.name + '.jpg' )
.appendTo($d)
.fadeOut('slow')
.fadeIn('slow');
}</code>
From what I can tell, when the function diamonds is called, it should run through an array I have set up, and for each card with the suit of diamonds, it runs the showcard function after 3000ms (3 seconds). It does everything the way it should except there is no pause between cards.
If I am not using the setTimeout method correctly, what would you recommend?