это мой код, и я хочу использовать анимацию, например, если я нажму на div, его id = 'div', чтобы показать список, но один за другим и слева направо, я не хочу, чтобы он отображался напрямую и все в одно и то же время, поэтому я думал, могу ли я использовать setInterval или setTimeout, но я все еще не знаю, как я могу его использовать, или если это невозможно.
<html><head><title></title></head>
<body onload="Hide();">
<div id="div" onclick="showList();"> <!-- this the div when i click on it i want to show and
hide the list below-->
<hr><hr><hr>
</div>
<div id="li">
<li id="l1"><a href="##">Home</a></li> <!-- this which i want to hide and show it -->
<li id="l2"><a href="##">Offers</a></li>
<li id="l3"><a href="##">List</a></li>
<li id="l4"><a href="##">Books</a></li>
<li id="l5"><a href="##">Help</a></li>
<li id="l6"><a href="##">Setting</a></li>
</div>
<script>
/*this function to show and hide the list and i want
to add some codes to makes an animation when it hides and shows
the list*/
function showList(){
var show = document.getElementById("li");
if(show.style.display==="block"){
show.style.display = "none";
}
else {
show.style.display="Block";
}
}
function Hide(){ //this function for unload(); which i put it in <body>
var show = document.getElementById("li");
show.style.display="none";
}
</script>
</body>
</html>