title: jQuery settimeout in a loop with array objects
body: <p>I need to have each suit of a deck of cards display for 3 seconds and then fadeOut to the next card.  Right now they all show up at once.  </p>
  
  <p>I'm new at coding so any help would be appreciated.  Here is my link <a href="http://itweb.fvtc.edu/120418457/Javascript/assignment4carddisplay/" rel="nofollow noreferrer">http://itweb.fvtc.edu/120418457/Javascript/assignment4carddisplay/</a></p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
      /*  New Additions for end
          Added more output for winning/losing to the 'hand' object
          Added a restart button click to re-deal
      */
  
      function card(name,suit,value) {
          this.name = name;
          this.suit = suit;
          this.value = value;
      } 
  
      var deck = [
          new card('Ace', 'Hearts',11),
          new card('Two', 'Hearts',2),
          new card('Three', 'Hearts',3),
          new card('Four', 'Hearts',4),
          new card('Five', 'Hearts',5),
          new card('Six', 'Hearts',6),
          new card('Seven', 'Hearts',7),
          new card('Eight', 'Hearts',8),
          new card('Nine', 'Hearts',9),
          new card('Ten', 'Hearts',10),
          new card('Jack', 'Hearts',10),
          new card('Queen', 'Hearts',10),
          new card('King', 'Hearts',10),
          new card('Ace', 'Diamonds',11),
          new card('Two', 'Diamonds',2),
          new card('Three', 'Diamonds',3),
          new card('Four', 'Diamonds',4),
          new card('Five', 'Diamonds',5),
          new card('Six', 'Diamonds',6),
          new card('Seven', 'Diamonds',7),
          new card('Eight', 'Diamonds',8),
          new card('Nine', 'Diamonds',9),
          new card('Ten', 'Diamonds',10),
          new card('Jack', 'Diamonds',10),
          new card('Queen', 'Diamonds',10),
          new card('King', 'Diamonds',10),
          new card('Ace', 'Clubs',11),
          new card('Two', 'Clubs',2),
          new card('Three', 'Clubs',3),
          new card('Four', 'Clubs',4),
          new card('Five', 'Clubs',5),
          new card('Six', 'Clubs',6),
          new card('Seven', 'Clubs',7),
          new card('Eight', 'Clubs',8),
          new card('Nine', 'Clubs',9),
          new card('Ten', 'Clubs',10),
          new card('Jack', 'Clubs',10),
          new card('Queen', 'Clubs',10),
          new card('King', 'Clubs',10),
          new card('Ace', 'Spades',11),
          new card('Two', 'Spades',2),
          new card('Three', 'Spades',3),
          new card('Four', 'Spades',4),
          new card('Five', 'Spades',5),
          new card('Six', 'Spades',6),
          new card('Seven', 'Spades',7),
          new card('Eight', 'Spades',8),
          new card('Nine', 'Spades',9),
          new card('Ten', 'Spades',10),
          new card('Jack', 'Spades',10),
          new card('Queen', 'Spades',10),
          new card('King', 'Spades',10)
      ];
  
      function deal(){
            for(var i=0;i&lt;13;i++){
              var displayCards = deck[i];
                  var $d = $("&lt;div&gt;");//get card from deck
                  $d.addClass("current_card")
                  .appendTo("#heart"); 
              $("&lt;img&gt;").attr('alt', displayCards.name + ' of ' +    displayCards.suit )
                  .attr('src', 'images/cards/' + displayCards.suit + '/' + displayCards.name + '.jpg' )
                  .appendTo($d)
                  // .fadeOut('slow')
                  // .fadeIn('slow');   
  
                setTimeout(function(){
                    fadeOut('slow');
                        fadeIn('slow');   
                 
                },('3000'));
                
            }
          
      $('displayCards').empty();
      }
      $("#btnHeart").click(function(){
          deal();
          
      });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="main"&gt;
    &lt;h1&gt;Click to reveal your cards&lt;/h1&gt;
    &lt;!-- &lt;h3 id="hdrTotal"&gt;&lt;/h3&gt;&lt;h3 id="hdrResult"&gt;&lt;/h3&gt; --&gt;
    &lt;div id="cardDisplay"&gt;    
      &lt;div id="controls"&gt;
        &lt;div class="hand" id="heart"&gt;&lt;/div&gt;
        &lt;div class="hand" id="clubs"&gt;&lt;/div&gt;
        &lt;div class="hand" id="diamonds"&gt;&lt;/div&gt;
        &lt;div class="hand" id="spade"&gt;&lt;/div&gt;
      &lt;/div&gt;
      
      &lt;input type ="button" id="btnHeart" value ="Hearts"/&gt;
      &lt;input type ="button" id="btnClub" value ="Clubs"/&gt;
      &lt;input type ="button" id="btnDiamond" value ="Diamonds"/&gt;
      &lt;input type ="button" id="btnSpade" value ="Spades"/&gt;
    &lt;/div&gt;    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>