JQUERY，創建面板，淡入/淡出

Question

我在我的頁面上有一個DIV，我希望能夠切換卡/ div以淡入淡出&。

斷碼：

$('.toogle-link').live('click', function() { 
    var toogleID = $(this).attr("name"); 

    $('.carditem').fadeOut(function() { 
     // Animation complete show correct card 
     $('#' + toogleID).fadeIn(); 
    }); 

    return false; 

}); 

問題是淡出完成，這是造成卡片堆棧了一會兒，看起來可怕與當前卡淡出，新卡在衰落前的淡入正在發生。 有任何想法嗎？

Answer 1

它看起來像你就忘記了時間參數：

.fadeOut（[時間]，[回調]）

試試這個：

$('.toogle-link').live('click', function() { 
    var toogleID = $(this).attr("name"); 

    $('.carditem').fadeOut("slow", function() { 
    // Animation complete show correct card 
    $('#' + toogleID).fadeIn(); 
}); 

return false; 

}）;

Answer 2

根據使用的其他jQuery可能會發生這種情況。

您可以手動設置持續時間，然後對fadeIn使用超時，調用.hide（）並消除fadeOut效果。

用戶Marek對official site發表了評論。

Answer 3

我想我有同樣的問題，我通過隱藏它完全顯示了正確的

$('.toogle-link').live('click', function() { 
    var toogleID = $(this).attr("name"); 

    $('.carditem').fadeOut(function() { 
     $('.carditem').css("display", "none"); // this do the trick 
     // Animation complete show correct card 
     $('#' + toogleID).fadeIn(); 
    }); 

    return false; 

}); 

我不知道這是最好的解決方案之前解決，但它工作正常。

問題是元素不是100％不可見的，你必須在顯示另一個元素之前完全隱藏它。也許延遲fadeIn之前可以解決這個問題。