Анимация для каждого элемента next() в JQuery

343

23 декабря 2016, 14:40

Я хочу добиться эффекта, что при нажатии на элемент icon-menu, каждый пункт li в отдельности последовательно плавно менял совою прозрачность и выезжал слева на право (после выполнения анимации предыдущего элемента) и скрывал иконку самого меню и показывал плавно другую) и при нажатии на элемент .close возникала анимация в обратном направлении.

эффект вроде как получается, но Я не могу добиться чтобы каждый элемент воспроизводил свою анимацию отдельно)

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')">F.A.Q</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;
}

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')">F.A.Q</li> 
  </ul> 
</nav>