所以我有一个下拉翻转效果,但是如果有人在元素上盘旋超过0.5秒,我只希望它能够正常工作。
$('#cart_nav2').mouseenter(function(){
$('#cart_status').hide();
$('#cart_contents').stop(true,true).delay(500).slideDown('#cart_contents');
});
$('#cart_nav2').mouseleave(function(){
$('#cart_contents').slideUp('#cart_contents');
});
所以目前' cart_contents'鼠标输入后,元素将显示.5秒,但我希望它仅在光标悬停超过0.5秒时显示。我做错了什么?
答案 0 :(得分:0)
您可以使用基于计时器的解决方案,例如
var navContentSliderTimer;
$('#cart_nav2').mouseenter(function () {
navContentSliderTimer = setTimeout(function () {
$('#cart_status').hide();
$('#cart_contents').stop(true, true).delay(500).slideDown();
}, 500);
});
$('#cart_nav2').mouseleave(function () {
clearTimeout(navContentSliderTimer)
$('#cart_contents').slideUp();
});
答案 1 :(得分:0)
问题是,只要将鼠标悬停在#cart_nav2上,就会调用该函数。你只是推迟动画,但动画总是会出现。如果移动鼠标,则立即调用slideUp动画。因此,如果您快速翻转元素,它将立即滑动(即使它不能)然后.5秒后它将向下滑动。试试这个
$('#cart_nav2').mouseenter(function(){
$('#cart_status').hide();
setTimeout(function(){
if ($('#cart_nav2').is(':hover')) {
$('#cart_contents').stop(true,true).slideDown('#cart_contents');
},500)
});
答案 2 :(得分:0)
以下只是一个想法的例证(未经测试):
isHovering = false; // should have a "global enough" scope.
$('#cart_nav2').mouseenter(function(){
isHovering = true;
var date = new Date();
var startTime = date.getTime()
do while (isHovering and date.getTime() - startTime < 5000) {
// can use small delay here
}
if (isHovering) {
$('#cart_status').hide();
$('#cart_contents').('#cart_contents');
}
});
$('#cart_nav2').mouseleave(function(){
isHovering = false;
$('#cart_contents').slideUp('#cart_contents');
});