jQuery settimeout in a loop with array objects

Question

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.

I'm new at coding so any help would be appreciated. Here is my link http://itweb.fvtc.edu/120418457/Javascript/assignment4carddisplay/

Here is my 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<13;i++){
            var displayCards = deck[i];
                var $d = $("<div>");//get card from deck
                $d.addClass("current_card")
                .appendTo("#heart"); 
            $("<img>").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();
        
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<div id="main">
  <h1>Click to reveal your cards</h1>
  <!-- <h3 id="hdrTotal"></h3><h3 id="hdrResult"></h3> -->
  <div id="cardDisplay">    
    <div id="controls">
      <div class="hand" id="heart"></div>
      <div class="hand" id="clubs"></div>
      <div class="hand" id="diamonds"></div>
      <div class="hand" id="spade"></div>
    </div>
    
    <input type ="button" id="btnHeart" value ="Hearts"/>
    <input type ="button" id="btnClub" value ="Clubs"/>
    <input type ="button" id="btnDiamond" value ="Diamonds"/>
    <input type ="button" id="btnSpade" value ="Spades"/>
  </div>    
</div>