jQuery的淡入沒有真正衰落

Question

我有一個jQuery函數，其中某些div的淡入淡出，我不能我的整個文件粘貼到的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(); 
     }); 
    }) 
}); 

最後一個函數//重置地圖「a.zoom出」應該淡出目前的股利和在.DEFAULT DIV褪色，其目前淡出當前格但默認DIV不褪色早在？

任何人能看到我去錯了嗎？

---

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

你不需要queue功能。

如果你想在同一時間的fadeIn和fadeOut：

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

如果你想在fadeOut第一和之後結束fadeIn：

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