快速悬停的jQuery动画
问题描述：
如果将鼠标悬停在元素上，则动画可以正常工作。绿色层从左侧重叠，然后从顶部开始，黄色层与绿色层重叠。当鼠标离开元素时，该重叠应该自动撤消，从撤消黄色重叠和绿色重叠开始。快速悬停的jQuery动画
但是，如果光标悬停在它上面太快，动画会卡住黄色的重叠部分，直到重新拖动鼠标，然后弹出鼠标。我已经尝试在每个.animate方法之前添加.stop(false, true) jQuery方法，这是我阅读的方法可以解决类似问题，但这不起作用。我试图在.animate函数之前将它链接起来，我尝试了所有函数的所有变体，以及.stop(true,true);。
如果鼠标悬停部分在光标离开元素之前没有完成，是否有办法阻止mouseout部分发射？
$(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'})
})
}
)
});#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>
答
用下面的溶液可以保证“鼠标输入部分” fullfilled后的“鼠标离开份”仅运行和（反之亦然）。
此外，该脚本照顾快速用户操作的情况：“进入>离开>进入”状态仍然如用户没有做过“快速离开”一样。 所以实际上这应该做你想达到的（我希望至少）。
var mouseEnter = function() {
// console.log('in');
sPosition = 'in';
if (!mouseEnterIsDone || !mouseLeaveIsDone) return mouseEnterIsWaiting = true;
mouseEnterIsDone = false;
$('#crossX').animate({'width':'115px'}, function(){
$.when($('#crossY').animate({'height': '115px'})).then(function(){sanitizeAnimation('enter')})
})
},
mouseLeave = function() {
// console.log('out');
sPosition = 'out';
if (!mouseEnterIsDone || !mouseLeaveIsDone) return mouseLeaveIsWaiting = true;
mouseLeaveIsDone = false;
$('#crossY').animate({'height':'15px'}, function(){
$.when($('#crossX').animate({'width': '15px'})).then(function(){sanitizeAnimation('leave')})
})
},
sanitizeAnimation = function(sMode){
if ('enter' == sMode)
mouseEnterIsDone = true;
else
mouseLeaveIsDone = true;
if ('in' == sPosition) {
if (mouseEnterIsWaiting) {
mouseEnterIsWaiting = false;
mouseEnter();
}
} else {
if (mouseLeaveIsWaiting) {
mouseLeaveIsWaiting = false;
mouseLeave();
}
}
},
mouseEnterIsDone = true,
mouseLeaveIsDone = true,
mouseEnterIsWaiting = false,
mouseLeaveIsWaiting = false,
sPosition = 'out';
$(document).ready(function(){
$('#con').hover(mouseEnter, mouseLeave);
});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>如果您需要进一步的解释随意发表评论
答
$("#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');
\t $('#crossY').stop().animate({'height':'0px'},500,function(){
$('#crossX').stop().animate({'width':'0px'},500);
});
});#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;
}<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>
阿克塞尔，感谢您的回复和解释。您的解决方案使动画更好，并解决了我所问的问题。我现在想知道是否有一种方法，当光标离开元素时，动画可以从剩余的位置撤回。 –
是的@DustinL_G，这应该是可能的。我推荐阅读[我的这个答案]（https://stackoverflow.com/a/45885132/3931192）以更好地理解JS或CSS的动画。如果你喜欢，你可以在后续问题上给我打电话... – Axel