[英]delay qTip call using setTimeout and clearTimeout
This was working fine: 这工作正常:
$('#panel_derecho a.tooltip').each(function(){
$(this).qtip({
content: { url: '/includes/qtip.php?'+$(this).attr('rel')+' #'+$(this).attr('div'), text:'<center><img src="/images/loader.gif" alt="loading..." /></center>' },
show: { delay: 700, solo: true,effect: { length: 500 }},
hide: { fixed: true, delay: 200 },
position: {
corner: {
target: 'topLeft',
tooltip: 'middleRight'
}
},
style: {
name: 'light',
width: 700,
padding: 0,border: {
width: 4,
radius: 3,
color: '#5588CC'
}
}
});
});
but sometimes the user hovered while scrolling down the page and many calls to qtip that won't be shown where called so thought that adding a timeout was best go (isn't it?) 但是有时用户会在向下滚动页面时徘徊,并且很多对qtip的调用都不会显示在调用位置,所以以为最好添加超时是(不是吗?)
so i tried to set delayTip var with time to wait (while hover) and to clear it when mouse out: 所以我试图设置带有时间的delayTip var等待(悬停时),并在鼠标移出时将其清除:
$('#panel_derecho a.tooltip').each(function(){
var delayTip;
$(this).bind('mouseover',function(){
delayTip = setTimeout(function () {
$(this).qtip({
content: { url: '/includes/qtip.php?'+$(this).attr('rel')+' #'+$(this).attr('div'), text:'<center><img src="/images/loader.gif" alt="loading..." /></center>' },
show: { delay: 700, solo: true,effect: { length: 500 }},
hide: { fixed: true, delay: 200 },
position: {
corner: {
target: 'topLeft',
tooltip: 'middleRight'
}
},
style: {
name: 'light',
width: 700,
padding: 0,border: {
width: 4,
radius: 3,
color: '#5588CC'
}
}
});
}, 500);
};
$(this).bind('mouseout',function(){ clearTimeout(delayTip); });
});
the ting is that the tooltip is not shown and no errors are jumping in firebug, 提示是不会显示工具提示,并且萤火虫中没有错误跳跃,
what am I missing? 我想念什么?
When the timeout fires the this
keyword refers to the global object (most likely the window
), try to do something like this: 当超时触发时,
this
关键字引用全局对象(最有可能是window
),请尝试执行以下操作:
$('#panel_derecho a.tooltip').each(function(){
var delayTip = 0;
var self = $(this);
self.bind('mouseover',function(){
if (delayTip === 0) delayTip = setTimeout(function () {
self.qtip({
content: { url: '/includes/qtip.php?'+self.attr('rel')+' #'+self.attr('div'), text:'<center><img src="/images/loader.gif" alt="loading..." /></center>' },
show: { delay: 700, solo: true,effect: { length: 500 }},
hide: { fixed: true, delay: 200 },
position: {
corner: {
target: 'topLeft',
tooltip: 'middleRight'
}
},
style: {
name: 'light',
width: 700,
padding: 0,border: {
width: 4,
radius: 3,
color: '#5588CC'
}
}
});
delayTip = 0;
}, 500);
};
self.bind('mouseout',function(){ clearTimeout(delayTip); delayTip = 0; });
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.