如何在fadeOut/setTimeout後刪除（）div

當用戶單擊某個按鈕時，它會調用一個函數，在body標籤後面創建一個div，並在1秒後顯示並淡出它。但我怎樣才能刪除（）這個div並保持fadeOut動畫？如何在fadeOut/setTimeout後刪除（）div

我嘗試這樣做：

function myFunc(){ 
    jQuery('body').prepend("<div class='myDiv'>Hello World!</div>"); 
    $(".myDiv").show("slow", function() {}); 
    setTimeout(function() { 
     $('.myDiv').fadeOut('fast'); 
     $(".myDiv").remove(); 
    }, 1000); 

}

但是這種解決方案犯規保持淡出動畫。 :(

來源

2014-12-07 user3787036

，而不是

setTimeout(function() { 
     $('.myDiv').fadeOut('fast'); 
     $(".myDiv").remove(); 
    }, 1000);

嘗試使用

$('.myDiv').fadeOut(1000, function(){ 
    $(this).remove(); 
});

來源

2014-12-07 02:01:20

但是，這將破壞其目的是它已經出現了之後開始隱藏'div'元件在一秒鐘內的原代碼的邏輯。 – 2014-12-07 02:11:11

$('.myDiv').fadeOut('fast', function() { 
     $(".myDiv").remove(); 
});

的函數被調用時，在動畫完成。

來源

2014-12-07 02:01:19

在$.fadeOut()的回調取出div 。

另外我建議在$.show()的回調中運行setTimeout()，這樣你就可以確保所有操作的順序。

$(function() { 
 
    var $div, 
 
     onShow, 
 
     onHide; 
 
    
 
    $('body').prepend("<div class='myDiv'>Hello World!</div>"); 
 
    
 
    $div = $(".myDiv"); 
 
    
 
    onShow = function() { 
 
    setTimeout(function() { 
 
     $div.fadeOut('fast', onHide); 
 
    }, 1000); 
 
    }; 
 
    
 
    onHide = function() { 
 
    $div.remove(); 
 
    }; 
 

 
    $div.show("slow", onShow); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

來源

2014-12-07 02:03:24

如何在fadeOut/setTimeout後刪除（）div

回答

相關問題