Анимация изменения непрозрачности в jQuery не работает - PullRequest
Новая
       23

Анимация изменения непрозрачности в jQuery не работает

0 голосов
/ 31 августа 2018

У меня проблема с анимацией jQuery. У меня есть элемент, который должен:
(1) измените его непрозрачность с 0 на 1 и одновременно сдвиньте вниз
(2), а затем уменьшить от 100% высоты до 5px высоты когда мышь находится над родителем, и возвращайтесь, когда мышь находится вне родителя.
Все работает, кроме самой первой анимации - изменения непрозрачности. Это почему? Что я делаю не так?
Вот мой код: 

var $menu_it = jQuery('.menu-item');
$menu_it.append('<span class="menu_item_bar"></span>');
$menu_it.mouseover(function(){
    jQuery(this).find('.menu_item_bar').stop(true,true).animate({"opacity":"1"}, 100);
    jQuery(this).find('.menu_item_bar').stop(true,true).animate({"bottom":"25px"}, 100);
    jQuery(this).find('.menu_item_bar').stop(true,true).delay(100).animate({"height":"5px"}, 500);
});
$menu_it.mouseout(function(){
    jQuery(this).find('.menu_item_bar').stop(true,true).animate({"height":"100%"}, 500, function(){
        jQuery(this).stop(true,true).animate({"opacity":"0"}, 500);
    });
    jQuery(this).find('.menu_item_bar').stop(true,true).animate({"bottom":"190px"}, 750);
});

А вот jsfiddle:
https://jsfiddle.net/sg5db8y1/21/
Заранее благодарю за помощь.
PS Вместо знака $ есть jQuery, потому что я должен сделать это в среде Wordpress.

1 Ответ

0 голосов
/ 31 августа 2018

Проблема в том, что вы постоянно вызываете stop(true, true) при определении каждой анимации. Это означает, что вы заканчиваете ранее определенную анимацию (которая только началась) и перемещаете ее в конечную позицию.

Чтобы исправить это, не вызывайте stop() при определении последовательных анимаций или, что еще лучше, определите все анимации в одном вызове: 

var $menu_it = $('.menu-item');
$menu_it.append('<span class="menu_item_bar"></span>');

$menu_it.mouseover(function() {
  $(this).find('.menu_item_bar').stop(true, true).animate({
    "opacity": "1",
    "bottom": "25px",
    "height": "5px"
  }, 500);
});

$menu_it.mouseout(function() {
  $(this).find('.menu_item_bar').stop(true, true).animate({
    "height": "100%",
    "opacity": "0",
    "bottom": "190px"
  }, 750);
});
body .menu-item {
  padding: 50px 25px 0 25px;
  position: relative;
  display: inline-block;
}

.menu-item a {
  padding-bottom: 86px;
  text-decoration: none;
  color: #111;
}

.menu_item_bar {
  width: 100%;
  position: absolute;
  height: 100%;
  bottom: 100px;
  left: 0;
  z-index: 9999;
  opacity: 0;
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-item">
  <a href="#">Menu item 1</a>
</div>
<div class="menu-item">
  <a href="#">Menu item 2</a>
</div>
<div class="menu-item">
  <a href="#">Menu item 3</a>
</div>

При этом, вы можете сделать это намного эффективнее, используя только CSS: 

body .menu-item {
  padding: 50px 25px 0 25px;
  position: relative;
  display: inline-block;
}

.menu-item a {
  padding-bottom: 86px;
  text-decoration: none;
  color: #111;
}

.menu-item:hover .menu_item_bar {
  opacity: 1;
  height: 5px;
  bottom: 25px;
}

.menu_item_bar {
  width: 100%;
  position: absolute;
  height: 100%;
  bottom: 100px;
  left: 0;
  z-index: 9999;
  opacity: 0;
  background: red;
  transition: opacity 0.5s, bottom 0.5s, height 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-item">
  <a href="#">Menu item 1</a>
  <span class="menu_item_bar"></span>
</div>
<div class="menu-item">
  <a href="#">Menu item 2</a>
  <span class="menu_item_bar"></span>
</div>
<div class="menu-item">
  <a href="#">Menu item 3</a>
  <span class="menu_item_bar"></span>
</div>
...