jquery show div，停留幾秒鐘然後用淡出動畫關閉

Question

我想在更新網格後顯示結果消息div。

我想該消息的div會滑下與動畫漸變，然後停留5秒鐘，然後自動關閉與滑動畫

我的代碼看起來是這樣的。但只有滑動動畫作品。

$("#gridResult").fadeTo(2000, 500).slideDown(500, function() { 
    $("#gridResult").addClass('in'); 
}); 

$("#gridResult").fadeTo(2000, 500).slideUp(500, function() { 
    $("#gridResult").removeClass('in'); 
}); 

Answer 1

試試這個：

// you need to hide the grid for slide down to work 
 
$("#gridResult").hide().slideDown(500, function() { 
 
    // delay 5 seconds AFTER animation has completed 
 
    $(this).addClass('in').delay(5000).fadeTo(2000, 500).slideUp(500, function() { 
 
     $(this).removeClass('in'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="gridResult">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat dui at lacinia ultricies. Ut at massa nec metus pellentesque sodales. Maecenas sit amet tristique nisl. Donec rutrum sapien sed mauris lacinia, nec consequat enim tincidunt. Donec nisl ante, bibendum eget ligula eget, suscipit volutpat leo. Proin scelerisque ultrices urna eget fermentum. Duis rutrum velit quis orci lobortis lobortis. Phasellus hendrerit mi vitae urna pulvinar pretium.</div>

Answer 2

您可以從jQuery的使用延遲（），請參閱從文檔

樣品：

$("#foo").slideUp(300).delay(800).fadeIn(400); 

Answer 3

你可以在JS使用：

$("#gridResult").slideDown(500, function() { 
     $("#gridResult").addClass('in'); 
    }).delay(5000).slideUp(500, function() { 
     $("#gridResult").removeClass('in'); 
    }); 

CSS： 在第一狀態

#gridResult{ 
     display: none; 
    }