將fadeOut添加到當前JS

Question

$(document).ready(function() { 
     $(".tabs-menu a").click(function(event) { 
      event.preventDefault(); 
      $(this).parent().addClass("current"); 
      $(this).parent().siblings().removeClass("current"); 
      var tab = $(this).attr("href"); 
      $(".tab-content").not(tab).css("display", "none"); 
      $(tab).fadeIn(1200); 

     }); 
    }); 

這是用於帶有內容的標籤菜單（當然是使用jQuery）。

當我打開新選項卡時，當前內容快速淡出，但新選項卡內容緩慢打開（如指示1200）。

那麼，我該如何編輯這個現有的腳本來緩慢淡出內容呢？

例http://jsfiddle.net/2uts2kdt/7/

Answer 1

http://jsfiddle.net/2uts2kdt/9/

退房上述更新的jsfiddle。基本上你想在fadeOut完成後調用fadeIn。您需要使用promise().done()，因爲在多個元素上調用了fadeOut。所以一旦完成，它會調用完成的代碼。

$(document).ready(function() { 
    $(".tabs-menu a").click(function(event) { 
     event.preventDefault(); 
     $(this).parent().addClass("current"); 
     $(this).parent().siblings().removeClass("current"); 
     var tab = $(this).attr("href"); 
     $(".tab-content").not(tab).fadeOut(1200).promise().done(function() { 
      $(tab).fadeIn(1200); 
     });   
    }); 
}); 

Answer 2

如果我理解正確的話，那麼你想要的只是設置它添加fadeOut調用而不是display:none

$(document).ready(function() { 
$(".tabs-menu a").click(function(event) { 
    event.preventDefault(); 
    $(this).parent().addClass("current"); 
    $(this).parent().siblings().removeClass("current"); 
    var tab = $(this).attr("href"); 
    $(".tab-content").not(tab).fadeOut(1200); 
    $(tab).fadeIn(1200); 

});