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 that you have read and understand our privacy policy and code of conduct.

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