Question

我有一个鼠标悬停动画，后面跟着一个mouseleave动画。不幸的是，如果在触发mouseleave事件时尚未完成第一个动画，则不会发生第二个动画。请参阅下面的代码

HTML

<div class="wrapper">
  <div class="top">
    <div class="popup">
      popup
    </div>
  </div>
  <div class="bottom"></div>
</div>

CSS

.wrapper {
  background-color:red;
  padding:10px;
  position:relative;
  width:100px;
}

.top {
  background-color:blue;
  height:100px;
  position:relative;
  width:100px;
}

.bottom {
  background-color:green;
  cursor:pointer;
  height:40px;
  width:100px;
}

.popup {
  background-color:yellow;
  bottom:-10px;
  display:none;
  left:19px;
  opacity:0;
  padding:10px;
  position:absolute;
}

Jquery的

var popupVisible = false;

$('div.bottom').mouseover(function() {
  if (popupVisible === false) {
    $(this).parent().children('.top').children('.popup').css({'display':'block'}).animate({
      opacity:1,
      bottom:+10

    }, 500, function() {
      popupVisible = true;
    });
  }
});

$('.wrapper').mouseleave(function() {   
  if (popupVisible === true) {  
    $(this).children('.top').children('.popup').animate({
      opacity:0,
      bottom:-10

    }, 300, function() {
      $(this).css({'display':'none'});
      popupVisible = false;
    });
  }
});

我已将我的代码包含在JSFiddle页面中 - https://jsfiddle.net/n0uxaw8c/1/

我需要的是第一个动画在触发mouseleave事件时停止，然后运行第二个动画。

非常感谢任何帮助：）

Answer 1

虽然这不是你的问题的答案，但你可以用CSS做到这一点，CSS运行得更顺畅。

您可以使用CSS中的transition属性来创建漂亮的动画。

我在这里创建了一个JSFiddle：https://jsfiddle.net/n0uxaw8c/2/

在第一个动画完成之前运行第二个动画

1 个答案: