Написал анимацию выпадающего списка меню при 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>