Как оптимизировать анимацию по hover (css / html / jquery)?

234

17 мая 2018, 15:00

Написал анимацию выпадающего списка меню при hover на его родителя.

В общей 'конструкции' есть одна существенная проблема - наведите на родителя несколько раз подряд и Вы увидите, что не всегда показывается выпадающий список. Пока его первая функция+анимация не отработает до конца, вторая не начнется.

Вопрос: как оптимизировать код так, чтобы он реагировал 'выпадением' списка по каждому hover родителя?

$(function() 
{ 
 
    $.fn.extend({ 
        animateCss: function(animationName, callback) { 
            var animationEnd = (function(el) { 
                var animations = { 
                    animation: 'animationend', 
                    OAnimation: 'oAnimationEnd', 
                    MozAnimation: 'mozAnimationEnd', 
                    WebkitAnimation: 'webkitAnimationEnd', 
                }; 
 
                for (var t in animations) { 
                    if (el.style[t] !== undefined) { 
                        return animations[t]; 
                    } 
                } 
            })(document.createElement('div')); 
 
            this.addClass('animated ' + animationName).one(animationEnd, function() { 
                $(this).removeClass('animated ' + animationName); 
 
                if (typeof callback === 'function') callback(); 
            }); 
 
            return this; 
        }, 
    }); 
 
    $('#yourElement').animateCss('bounce', function() { 
 
    }); 
 
 
    $('.nav__item.dropdown').hover( 
        function(){ 
 
            var dropdown = $(this).find('>.nav'); 
            dropdown.removeClass('hide'); 
            dropdown.addClass('show'); 
            $(dropdown).animateCss('fadeInUp'); 
 
        }, 
        function(){ 
 
            var dropdown = $(this).find('>.nav'); 
 
            $(dropdown).animateCss('fadeOutDown', function() { 
                dropdown.removeClass('show'); 
                dropdown.addClass('hide'); 
            }); 
 
        } 
    ) 
});

.show 
{ 
  display: block; 
} 
 
.hide 
{ 
  display: none; 
} 
 
.test ul 
{ 
  list-style-type: none; 
  margin-top: initial; 
  margin-bottom: initial; 
  margin-left: initial; 
  margin-right: initial; 
  -webkit-padding-start: initial; 
} 
 
.test .nav.parents 
{ 
  display: flex; 
  flex-direction: row; 
} 
 
.test .nav.parents > .nav__item 
{ 
  padding: 10px; 
  background: salmon; 
} 
 
.test .nav.parents > .nav__item.dropdown > .nav 
{ 
  list-style-type: none; 
  margin-top: initial; 
  margin-bottom: initial; 
  margin-left: initial; 
  margin-right: initial; 
  -webkit-padding-start: initial; 
 
  position: absolute; 
} 
 
.test .nav.parents > .nav__item.dropdown > .nav > .nav__item 
{ 
  padding: 5px; 
  background: rosybrown; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> 
 
<div class="test"> 
  <ul class="nav parents"> 
    <li class="nav__item">Parent 1</li> 
    <li class="nav__item dropdown"> 
      Parent 2 
      <ul class="nav hide"> 
        <li class="nav__item">Child 1</li> 
        <li class="nav__item">Child 2</li> 
        <li class="nav__item">Child 3</li> 
        <li class="nav__item">Child 4</li> 
        <li class="nav__item">Child 5</li> 
      </ul> 
    </li> 
    <li class="nav__item">Parent 3</li> 
    <li class="nav__item dropdown"> 
      Parent 4 
      <ul class="nav hide"> 
        <li class="nav__item">Child 1</li> 
        <li class="nav__item">Child 2</li> 
        <li class="nav__item">Child 3</li> 
        <li class="nav__item">Child 4</li> 
        <li class="nav__item">Child 5</li> 
      </ul> 
    </li> 
    <li class="nav__item">Parent 5</li> 
  </ul> 
</div>

Answer 1

Не понятно для чего нужен jQuery , это вполне делается без js вообще

* { 
  list-style: none; 
  text-decoration: none; 
  margin: 0; 
  padding: 0; 
} 
 
ul { 
  display: flex; 
  flex-direction: row; 
  width: 100%; 
  justify-content: space-around; 
  background: #fbfbfb; 
} 
 
ul li ul { 
  display: flex; 
  flex-direction: column; 
  transform: translate(0, 100px)scale(1.2); 
  visibility:hidden; 
  opacity: 0; 
  transition: .5s .4s; 
  position: absolute; 
  left: -5px; 
  text-align: center; 
  padding: 0 10px 0 0; 
} 
 
ul li ul li { 
  white-space: nowrap; 
} 
 
li { 
  padding: 10px 20px; 
  position: relative; 
} 
 
ul li:hover ul { 
  transform: translate(0, 20px)scale(1); 
  opacity: 1; 
  visibility:visible; 
} 
 
a { 
  font-variant: small-caps; 
  color: blue; 
} 
 
.content { 
  padding-top: 50px; 
} 
 
.drop:after { 
  content: "+"; 
  font-size: 16px; 
} 
 
.drop:hover:after { 
  content: "-"; 
}

<ul> 
  <li><a href="">item1</a></li> 
  <li class="drop"><a href="">item2</a> 
    <ul> 
      <li><a href="">item2-1</a></li> 
      <li><a href="">item2-2</a></li> 
      <li><a href="">item2-3</a></li> 
      <li><a href="">item2-4</a></li> 
      <li><a href="">item2-5</a></li> 
    </ul> 
  </li> 
  <li><a href="">item3</a></li> 
  <li class="drop"><a href="">item4</a> 
    <ul> 
      <li><a href="">item4-1</a></li> 
      <li><a href="">item4-2</a></li> 
      <li><a href="">item4-3</a></li> 
      <li><a href="">item4-4</a></li> 
      <li><a href="">item4-5</a></li> 
    </ul> 
  </li> 
  <li><a href="">item5</a></li> 
</ul> 
 
 
<div class="content"> 
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus animi debitis ea dolore suscipit dolor minus nesciunt eum distinctio voluptates ex dicta perspiciatis placeat culpa sit aut, beatae quae earum?</p> 
</div>