1

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

1 ответ 1

3

Не понятно для чего нужен 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>

9
  • Используется библиотека animate.css, JS нужен, чтобы можно было по событию вешать определенную анимацию элементу... 13 мая 2018 в 9:15
  • кстати, в Вашем примере выпадающий список можно вызвать не наводя курсор на его родителя... 13 мая 2018 в 10:08
  • В Вашем примере с выпадающим списком можно взаимодействовать даже тогда, когда он якобы не активен. Наведите курсор на 100px ниже родителя и список появится. 13 мая 2018 в 10:12
  • Да, visibility выручил :) "тут 90% анимаций на css3 сделаны" - все 100%. Просто есть библиотека и хотелось ее юзать без внесения изменений в нее / ее использования. Но пока и в правду склоняюсь к тому, что проще прописать стили анимации самому элементу в css без использования js... 13 мая 2018 в 10:27
  • Имеется библиотека Animate.css, при наведение на родителя js цепляет класс-анимации выпадающему списку и список с нужной анимацией появляется (и убирается). Но в js есть проблема, пока первая анимация (появления) не отработает до конца, вторая анимация (скрытия) не запуститься, даже если уже мы отвели курсор от родителя. 13 мая 2018 в 10:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.