切換而不是剛剛出現？

Question

我正在使用下面的代碼在頂部顯示通知，但它只是出現無處不在。我希望它向下滾動，類似於切換，同時向下推動div中的所有內容。

繼承人的JavaScript

<script> 

window.onload = function() { 
    setTimeout(function() { 
     document.getElementById('top').style.display = 'block'; 
    }, 10000); 
} 

</script> 

HTML：

<div id="top"> 
    <p>content here</p> 
</div> 

Answer 1

使用.slideDown()而不是改變顯示屬性以阻止

window.onload = function() { 
    setTimeout(function() { 
     $('#top').slideDown() 
    }, 10000); 
} 

Answer 2

您有這樣的疑問標記與jQuery，並有是一個簡單的jQuery函數，所以這裏是這個版本：

$(function(){ 
    setTimeout(function(){ 
    $('#top').slideDown(); 
    }, 10000); 
}); 

http://api.jquery.com/slideDown/

如果你想這樣做，在普通的JavaScript我會建議使用CSS3過渡，而不是修改屬性像display或嘗試手動執行動畫。

使用CSS3和max-height此方法的一個例子，可以在這裏找到：http://davidwalsh.name/css-slide

然後你可以使用JavaScript來添加和刪除類切換所需的狀態，動畫將是您進行CSS3轉換。