当鼠标超过产品编号(焦点)时,显示一些产品信息。 当用户不再超过产品编号(模糊)时,请等待3秒钟,然后隐藏详细信息。
$('.productNumber').live('blur', function() {
setTimeout(function(){
var divToPutData = $(this);
divToPutData.hide();
}, 3000);
});
现在用户说如果用户在5秒内将鼠标移回以停止倒计时,直到模糊事件再次触发。不确定如何使用setTimeout执行此操作。
答案 0 :(得分:1)
var myTimeout = null;
$('.productNumber').live('mouseover', function() {
//If timeout is still active, clear
if(myTimeout != null)
clearTimeout(myTimeout);
});
$('.productNumber').live('blur', function() {
//Store the ID returned by setTimeout
myTimout = setTimeout(function(){ divToPutData.hide(); }, 3000);
});
答案 1 :(得分:0)
使用clearTimeout函数。
setTimeout返回一个数字id,你可以将它存储在一个变量中,然后将它传递给clearTimeout函数:
var myTimeout = setTimeout ( function(){alert(2);}, 1000);
clearTimeout(myTimeout);
答案 2 :(得分:0)
var t;
$('.productNumber').live('mouseover', function() {
clearTimeout(t);
});
$('.productNumber').live('mouseout', function() {
t = setTimeout(function(){
divToPutData.hide();
}, 3000);
});
答案 3 :(得分:0)
将setTimeout分配给变量,因此您可以在悬停时取消它
var hideTimeout;
$('.productNumber').live('blur',function() {
hideTimeout = setTimeout(function() {
divToPutData.hide();
}, 3000);
});
$('.productNumber').live('mouseover',function() {
clearTimeout(hideTimeout);
// Do the show stuff
}
答案 4 :(得分:0)
使用jQuery stop()
中止任何正在进行的动画
在此测试:http://jsfiddle.net/T7kRr/1/
<强>的jQuery 强>
$(".productNumber").hover(
function () {
$(this).find(".productDesc:last").stop(true, true).show();
},
function () {
$(this).find(".productDesc:last").delay(3000).fadeOut();
}
);
<强> HTML 强>
<div class="productNumber">1001<span class="productDesc" style="display:none">iPhone</span></div>
<div class="productNumber">2001<span class="productDesc" style="display:none">iPad</span></div>
<div class="productNumber">3333<span class="productDesc" style="display:none">TV</span></div>
<div class="productNumber">9999<span class="productDesc" style="display:none">HiFi</span></div>