Question

我对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环境中执行此操作。

Answer 1

问题是因为在定义每个动画时您反复调用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>

jQuery中的不透明度更改动画不起作用

1 个答案: