jQuery fadeIn実際にフェードインしない

Question

特定のdivがフェードインまたはフェードアウトするjQuery関数があります。サイズが大きすぎるため、すべてのイメージリンクが相対的なのでjsFiddleにファイル全体を貼り付けることはできません。

// On click hide default, Country specific 
    $('.default .asia').click(function(){ 
     $('.default').fadeOut("fast"); 
     $(".default").queue(function() { 
      $('.viewport-asia').fadeIn("fast"); 
      $('.viewport-asia').dequeue(); 
     });   
    }); 
    $('.default .north-america').click(function(){ 
     $('.default').fadeOut("fast"); 
     $(".default").queue(function() { 
      $('.viewport-america').fadeIn("fast"); 
      $('.viewport-america').dequeue(); 
     }); 
    }); 
    $('.default .europe').click(function(){ 
     $('.default').fadeOut("fast"); 
     $(".default").queue(function() { 
      $('.viewport-europe').fadeIn("fast"); 
      $('.viewport-europe').dequeue(); 
     }); 
    }); 

    // Drag event 
    $(".america-big").draggable(); 
    $(".europe-big").draggable(); 
    $(".asia-big").draggable(); 

    // Reset map 
    $('a.zoom-out').click(function(){ 
     $('.hidden').fadeOut("fast"); 
     $(".hidden").queue(function() { 
      $('.default').fadeIn("fast"); 
      $('.hidden').dequeue(); 
     }); 
    }) 
}); 

現在のdivをフェードアウトし、.DEFAULTのdiv要素をフェードインする必要がありマップ「a.zoomアウトを」リセット//最後の関数、その現在の現在のdivフェードアウトが、デフォルトのdivが退色されていません戻って？

どこの人が間違っているのを誰でも見ることができますか？

---

あなたはqueue機能を必要としないHTML

<div class="map"> 

    <!-- // Default Map --> 
    <div class="default"> 
     <div class="asia"><img src="map/asia.png" alt="Asia"></div> 
     <div class="north-america"><img src="map/north-america.jpg" alt="America"></div> 
     <div class="europe"><img src="map/europe.jpg" alt="Europe"></div> 
    </div> 

    <!-- // Animated Map // North America --> 
    <div class="viewport-america hidden"> 
     <div class="compass"> 
      <a href="#" class="arrow top">Top</a> 
      <a href="#" class="arrow right">Right</a> 
      <a href="#" class="arrow bottom">Bottom</a> 
      <a href="#" class="arrow left">Left</a> 
     </div> 
     <a href="#" class="zoom-out">Zoom Out</a> 
     <div class="instructions"><img src="map/instructions.png" alt="Instructions"></div> 
     <div class="america-big"><img src="http://placekitten.com/1989/996" alt="America" /></div> 
    </div> 

    <!-- // Animated Map // Europe --> 
    <div class="viewport-europe hidden"> 
     <div class="compass"> 
      <a href="#" class="arrow top">Top</a> 
      <a href="#" class="arrow right">Right</a> 
      <a href="#" class="arrow bottom">Bottom</a> 
      <a href="#" class="arrow left">Left</a> 
     </div> 
     <a href="#" class="zoom-out">Zoom Out</a> 
     <div class="instructions"><img src="map/instructions.png" alt="Instructions"></div> 
     <div class="europe-big"><img src="http://placekitten.com/2000/1000" alt="Europe" /></div> 
    </div> 

    <!-- // Animated Map // Asia --> 
    <div class="viewport-asia hidden"> 
     <div class="compass"> 
      <a href="#" class="arrow top">Top</a> 
      <a href="#" class="arrow right">Right</a> 
      <a href="#" class="arrow bottom">Bottom</a> 
      <a href="#" class="arrow left">Left</a> 
     </div> 
     <a href="#" class="zoom-out">Zoom Out</a> 
     <div class="instructions"><img src="map/instructions.png" alt="Instructions"></div> 
     <div class="asia-big"><img src="http://placekitten.com/1999/999" alt="Asia" /></div> 
    </div> 

</div> 

Answer 1

。

あなたが同時にfadeInとfadeOut場合：あなたはfadeOutは最初、それはfadeInを終了した後にしたい場合は

$('.default .asia').click(function(){ 
    $('.default').fadeOut("fast"); 
    $('.viewport-asia').fadeIn("fast"); 
}); 

を：

$('.default .asia').click(function(){ 
    $('.default').fadeOut("fast", function(){ 
     $('.viewport-asia').fadeIn("fast"); 
    }); 
});