I want to achieve the effect that when I clicked on the icon-menu element, each item li individually sequentially smoothly changed its opacity and left from left to right (after the animation of the previous element) and hid the icon of the menu itself and smoothly showed another) and when I clicked the .close element sprang up animation.

the effect seems to work out, but I can’t get every element to play its animation separately

navigation function onShowNavMenu () {$ ('# section-header .icon-menu'). animate ({'opacity': '0',}, 300);

$('#section-header .close').animate({ 'opacity':'1', 'zIndex':'999', },300); $('#section-header .menu li').animate({ 'opacity':'0', 'left':'+=30px', },300).next(); } function onCloseNavMenu(){ $('#section-header .icon-menu').animate({ 'opacity':'1', },300); $('#section-header .close').animate({ 'opacity':'0', 'zIndex':'-999', },300); $('#section-header .menu li').animate({ 'opacity':'0', 'left':'-=30px', },300).next(); } <nav role="navigation"> <div class="close" style="position: absolute; left: 50px; opacity: 0; z-index: -999;" onclick="onCloseNavMenu()"></div> <div class="icon-menu" onclick="onShowNavMenu()"></div> <ul class="menu"> <li onclick="showMenuItem('service')">Услуги</li> <li onclick="showMenuItem('magazine')">Магазин</li> <li onclick="showMenuItem('aboot')">О Нас</li> <li onclick="showMenuItem('faq')">FAQ</li> </ul> </nav> #section-header .menu{ position: absolute; float: left; top: 50px; left: 100px; } #section-header .menu li{ position: relative; top: 0; left: 0; opacity: 0; float: left; height: 17px; line-height: 17px; vertical-align: middle; color: #909090; margin-right: 35px; font-family: calibri-light; font-size: 14px; cursor: pointer; } #section-header .menu li:hover{ color: #FFF; }

    1 answer 1

     function onShowNavMenu() { $('#section-header .icon-menu').animate({ 'opacity': '0', }, 300); $('#section-header .close').animate({ 'opacity': '1', 'zIndex': '999', }, 300); function showIcon(item) { item.animate({ 'opacity': '1', 'left': '+=30px', }, 300, function() { showIcon($(this).next()) }); } showIcon($('#section-header .menu li:first-child')); } function onCloseNavMenu() { $('#section-header .icon-menu').animate({ 'opacity': '1', }, 300); $('#section-header .close').animate({ 'opacity': '0', 'zIndex': '-999', }, 300); function showIcon(item) { item.animate({ 'opacity': '0', 'left': '-=30px', }, 300, function() { showIcon($(this).prev()) }); } showIcon($('#section-header .menu li:last-child')); } function showMenuItem() {} 
     .icon-menu { background: url(https://cdn3.iconfinder.com/data/icons/roundies-icons/32/menu-128.png); background-size: 25px 25px; width: 25px; height: 25px; } .close { background: url(https://cdn4.iconfinder.com/data/icons/roundies-2/32/list-128.png); background-size: 25px 25px; width: 25px; height: 25px; opacity: 0; } #section-header .menu { position: absolute; float: left; top: 50px; left: 100px; } #section-header .menu li { position: relative; top: 0; left: 0; opacity: 0; float: left; height: 17px; line-height: 17px; vertical-align: middle; color: #909090; margin-right: 35px; font-family: calibri-light; font-size: 14px; cursor: pointer; list-style: none; } #section-header .menu li:hover { color: #FFF; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav role="navigation" id="section-header"> <div class="icon-menu" onclick="onShowNavMenu()"></div> <div class="close" onclick="onCloseNavMenu()"></div> <ul class="menu"> <li onclick="showMenuItem('service')">Услуги</li> <li onclick="showMenuItem('magazine')">Магазин</li> <li onclick="showMenuItem('aboot')">О Нас</li> <li onclick="showMenuItem('faq')">FAQ</li> </ul> </nav>