爲什麼jQuery.fadeTo在回調中調用toggleClass時不動畫？

Question

我有一個類「隱藏」，這使得模態display: none;（從捕捉鼠標點擊保持隱形模式）

淡入模態啓動模式對話框我做

jQuery('#modalID').toggleClass('hidden'); <-- Makes the modal display: block; by removing the "hidden" class 
jQuery('#modalID').fadeTo(.3, 1.0); 

哪完美的作品。問題是，當我嘗試在淡出後重新啓用「隱藏」類（使其顯示：無：再次）時。當我嘗試切換fadeTo回調中的「隱藏」類時，模式會立即消失。這裏是我的代碼

jQuery('#modalID').fadeTo(.3, 0, function(){ 
    jQuery('#modalID').toggleClass('hidden'); <-- *should* make the modal display:none AFTER fading it out.... 
}); 

我試圖明確添加類的fadeTo回調

jQuery('#modalID').fadeTo(.3, 0, function(){ 
    jQuery('#modalID').addClass('hidden'); 
}); 

，甚至試圖完全忽略回調，只是把命令背靠背...

jQuery('#overlayID').fadeTo(.3, 0); jQuery('#overlayID').toggleClass('hidden'); 

如何淡出模態，然後將「隱藏」類添加回模態後綴？

Answer 1

該問題是由於您的duration參數。它以毫秒爲單位，所以.3的設置意味着0.0003秒。因此，淡出現象即刻顯示，回調立即觸發。

要解決這個問題，想必您要動畫持續0.3秒，所以值應該是300。試試這個：

$('#modalID').fadeTo(300, 0, function(){ 
    $(this).toggleClass('hidden'); 
}); 

另外請注意，你可以只使用​​，避免使用不透明度的第二個參數。