Fade in each li one by one

Question

I want to fade each nav li one by one. Here\'s my current code. It shows the whole div, now I want to fade in each li one by one with a slight dela

Answer 1

You can use an each() call to loop through the li elements and delay() the fadeIn() animation by an incremental amount. Try this:

$("#dropDownMenu li").each(function(i) {
    $(this).delay(100 * i).fadeIn(500);
});

.sub-menu {
    position: absolute;
    z-index: 1000;
    /* color: #fff;
    right: 5px; */
}

.sub-menu li {
    display: none;
}

    

        
 First
        
Second
        
Third
        
Fourth
        
Fifth
    

If you want to increase/decrease the interval between items fading, change the value provided to the delay() method. In this example I used 100ms.