Question

如果将鼠标悬停在元素上，则动画可以正常工作。绿色层从左侧重叠，然后从顶部开始，黄色层与绿色层重叠。当鼠标离开元素时，此重叠应自动撤消，从撤消黄色重叠开始，然后撤消绿色重叠。

但是如果光标在它上面快速地悬停，则动画会卡在黄色重叠上，直到您重新移动然后再拖出鼠标。我尝试在每个.stop(false, true)方法之前添加.animate jQuery方法，这是我所阅读的已解决类似问题的方法，但这并不起作用。我通过在.animate函数之前将其链接来尝试它，我尝试了所有函数的所有变体，以及.stop(true,true);。

如果鼠标悬停部分在光标离开元素之前没有完成，是否可以阻止鼠标移除部分？

＆＃13;

$(document).ready(function() {
  $('#con').hover(
    function() { // handlerIn
      $('#crossX').animate({'width': '115px'}, function() {
        $('#crossY').animate({'height': '115px'})
      })
    },
    function() { // handlerOut
      $('#crossY').animate({'height': '15px'}, function() {
        $('#crossX').animate({'width': '15px'})
      })
    }
  )
});

＆＃13;

#con {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 130px;
  height: 130px;
  overflow: hidden;
  //background-color: black;
}
#one {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
  color:black
}
#crossX {
  position: absolute;
  top: 15px;
  left: 0px;
  width: 15px;
  height: 100px;
  background-color:  green;
  color: yellow;
}
#crossY {
  position: absolute;
  top: 0px;
  left: 15px;
  width: 100px;
  height: 15px;
  background-color:  yellow;
  color: white;
}
#black {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  border: 15px solid black;
  z-index: 10;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="con">
  <div id="one"></div>
  <div id="crossX"></div>
  <div id="crossY"></div>
  <div id="black"></div>
</div>

＆＃13;

Answer 1

使用以下解决方案可确保“鼠标离开部件”仅在“鼠标输入部件”完全填充后运行（反之亦然）。

此外，脚本还会注意快速用户操作的情况：“输入＆gt;离开＆gt;输入”状态仍然好像用户没有完成“快速离开”。 所以实际上这应该做你想要实现的目标（我希望至少如此）。

body {
  padding: 5%;
}

#con {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 130px;
  height: 130px;
  overflow: hidden;
  //background-color: black;
}
#one {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
  color:black
}
#crossX {
  position: absolute;
  top: 15px;
  left: 0px;
  width: 15px;
  height: 100px;
  background-color:  green;
  color: yellow;
}
#crossY {
  position: absolute;
  top: 0px;
  left: 15px;
  width: 100px;
  height: 15px;
  background-color:  yellow;
  color: white;
}
#black {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  border: 15px solid black;
  z-index: 10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="con">
  <div id="one"></div>
  <div id="crossX"></div>
  <div id="crossY"></div>
  <div id="black"></div>
</div>

{{1}}

如果您需要进一步说明，请随时发表评论

Answer 2

＆＃13;

$("#con").mouseenter(function() {
$('body').addClass('Hover');
     $('#crossX').stop().animate({'width':'115px'},500, function(){
     $('#crossY').stop().animate({'height': '115px'},500);
     });
      
});

$("body").mouseenter(function() {
$('body').addClass('Hover');
   	  $('#crossY').stop().animate({'height':'0px'},500,function(){
      $('#crossX').stop().animate({'width':'0px'},500);
     });
      
});

＆＃13;

#con {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 130px;
  height: 130px;
  overflow: hidden;
  //background-color: black;
}
#one {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
  color:black
}
#crossX {
  position: absolute;
  top: 15px;
  left: 0px;
  width: 15px;
  height: 100px;
  background-color:  green;
  color: yellow;
}
#crossY {
  position: absolute;
  top: 0px;
  left: 15px;
  width: 100px;
  height: 15px;
  background-color:  yellow;
  color: white;
}
#black {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  border: 15px solid black;
  z-index: 10;
}
body{
  background-color:#dcdcdc;
  height:500px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
<div id="con">
  <div id="one"></div>
  <div id="crossX"></div>
  <div id="crossY"></div>
  <div id="black"></div>
</div>
</body>

＆＃13;

jQuery动画坚持快速悬停

2 个答案: