带有数组对象的循环中的jQuery settimeout

Question

我需要让一副牌显示3秒钟，然后淡出到下一张牌。现在他们都出现了。

我是编码的新手，所以任何帮助都会受到赞赏。这是我的链接http://itweb.fvtc.edu/120418457/Javascript/assignment4carddisplay/

这是我的代码：

$(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>