如果您将鼠标悬停在元素上的速度很慢,则动画会正常运行。绿色层从左侧开始重叠,然后从顶部开始,黄色层与绿色层重叠。这种重叠应该在鼠标离开元素时自行撤消,先撤消黄色重叠,然后撤消绿色重叠。
但是如果光标悬停在它上面的速度太快,动画就会卡在黄色重叠部分,直到您重新将鼠标悬停然后鼠标移开。我尝试在每个 .animate
方法之前添加 .stop(false, true)
jQuery 方法,这是我读到的解决类似问题的方法,但这并没有工作。我通过在 .animate
函数之前链接它来尝试它,我尝试了它的所有变体,在所有函数上,以及 .stop(true,true);
.
如果 mouseover 部分在光标离开元素之前没有完成,有什么方法可以阻止 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>
最佳答案
通过以下解决方案,可以保证“鼠标离开部分”仅在“鼠标进入部分”填满后运行(反之亦然)。
此外,脚本会处理用户快速操作时的情况:“进入 > 离开 > 进入”状态保持不变,就好像用户没有完成“快速离开”一样。 所以实际上这应该可以实现您想要实现的目标(至少我希望如此)。
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>
如果您需要进一步的解释,请随时发表评论
关于javascript - jQuery 动画坚持快速悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46780580/