hoverintent插件与我需要的相反。我有一个由.trigger触发的.popup,当我将它悬停时,我希望.popup不会淡出几秒钟,但如果我将其悬停,然后再次悬停,则取消将要发生的淡出并保持.popup打开。
有谁知道我会怎么做?
这不起作用,但这是一个想法:
$('.trigger').hover(function(){
$('.popup').fadeIn(600)
}, function() {
$('.popup').delay(2000, function(){
if ($(this).blur() = true) {
$('.popup').fadeOut(600)
}
});
})
jQuery HoverIntent plugin正是你想要的。
timeout属性将设置在调用out函数之前鼠标需要超出该区域的时间。
来自悬停意图网站的报价:
timeout:调用“out”函数之前的简单延迟(以毫秒为单位)。如果用户在超时到期之前将鼠标移回元素,则不会调用“out”函数(也不会调用“over”函数)。这主要是为了防止草率/人为的鼠标移动轨迹暂时(和无意地)将用户从目标元素中移除......给予他们返回的时间。默认超时:0
设置它......
$('.trigger').hoverIntent({
over: startHover,
out: endHover,
timeout: 2000
});
然后定义处理over
和out
的函数
function startHover(e){
//your logic here
$('.popup').fadeIn(600)
}
function endHover(){
//your logic here
$('.popup').fadeOut(600)
}
编辑:
您还可以调整interval
属性以增加/减少startHover函数触发的时间...默认设置为100毫秒...您可以将其设置为零以立即触发弹出窗口如果您愿意,进入触发区域。
这是最简单的方法,没有额外的插件:
$('.trigger').hover(function() {
clearTimeout(this.timer);
$('.popup').fadeIn(600);
}, function() {
this.timer = setTimeout(function() {
if ($(this).blur() = true) { // off topic: you should to check this condition ;)
$('.popup').fadeOut(600);
}
}, 2000);
});
setTimeout()和clearTimeout()是HTML DOM Window对象的本机JS函数,因为它永远存在。
您可以尝试使用jquery hoverintent插件。
这对我有用:
$(".triger").mouseenter(function() {
$(this).find("popup").fadeIn();
}).mouseleave(function() {
$(this).find("popup").delay(200).fadeOut();
});