需要使用javascript/jquery添加淡入淡出效果到隱藏框

Question

我有一個通知div，在5秒後消失。如何添加淡出效果，消失將是平穩和美好的。

我現在代碼：

<script type="text/javascript"> 
setTimeout(function(){ 
    document.getElementById('notification').style.display = 'none'; 
}, 5000); 
//5secs 
</script> 

Answer 1

此功能將啓動文件後準備計數。可以添加到你想要的任何地方。只要它在<script></script>標籤或不同的JS文件之間。

$(function(){ 
    $("#notification").delay(5000).fadeOut(2000); // the 2000 is the time the fadeOut will take to disapear. 
}); 

jsfidlle顯示此：http://jsfiddle.net/jGtTP/

Answer 2

setTimeout(function() { 
    $('#notification').attr('style', 'display: none;'); 
}), 5000); 

Answer 3

$('#notification').delay(5000).fadeOut(); 

你會在JavaScript塊添加這種，這種方式：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" 
     type="text/javascript"> 
</script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('#notification').delay(5000).fadeOut(); 

} 

</script> 

Answer 4

使用jQuery，你可以嘗試：

$("#notification").effect("fade"); 

更多閱讀：http://jqueryui.com/demos/effect/

Answer 5

，如果你不想使用jQuery，你可以使用jsTween（在Google上搜索它）。我在網站上使用它進行動畫，它非常好，並且（在某些情況下）比jQuery淡出對手快得多。

opacityTween = new OpacityTween(document.getElementById('notification'),Tween.strongEaseInOut, 100, 0, 5); 
opacityTween.start() 

將淡出對象超過5秒