Soar menu with delay

by oterox

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<!-- 
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div> 
-->

<div class="logo"></div>

<ul class="menu">
    <li>Option1</li>
    <li>Option2</li>
    <li>Option3</li>
    <li>Option4</li>
</ul>

CSS

div {
    width: 100px;
    height: 100px;
    background: orange;
    margin: 5px;
    display:none;
}
li { display: none; }
div.logo {
    position:absolute;
    background:#C00;
    display:none;
    top:100px; left:100px; width:50px; height:50px
}

JavaScript

$(".menu li").each(function(idx) {
    $(this).delay(idx * 1000).fadeIn("slow");
});

$('.logo').fadeTo(20000 , 1);

//$("#div1,#div2,#div3,#div4").each(function(idx) {
//    $(this).delay(idx * 1000).fadeIn("slow");
//});