[英]jquery/javascript blur/focus & settimeout
When mouse is over a product number (focus) then show some product information. 当鼠标悬停在产品编号(焦点)上时,然后显示一些产品信息。 When user is not longer over a product number (blur), then wait 3 seconds, then hide details.
当用户不再使用某个产品编号(模糊)时,请等待3秒钟,然后隐藏详细信息。
$('.productNumber').live('blur', function() {
setTimeout(function(){
var divToPutData = $(this);
divToPutData.hide();
}, 3000);
});
Now user says that if user moves mouse back within those 5 seconds to stop the count down, until a blur event fires again. 现在,用户说如果用户在这5秒钟内将鼠标移回以停止递减计数,直到模糊事件再次触发。 No sure how to do this with setTimeout.
不确定如何使用setTimeout执行此操作。
Use clearTimeout()
使用
clearTimeout()
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);
});
Use the function clearTimeout. 使用函数clearTimeout。
setTimeout returns a numeric id, you can store it in a variable, and then pass it to the clearTimeout function: setTimeout返回一个数字id,您可以将其存储在变量中,然后将其传递给clearTimeout函数:
var myTimeout = setTimeout ( function(){alert(2);}, 1000);
clearTimeout(myTimeout);
var t;
$('.productNumber').live('mouseover', function() {
clearTimeout(t);
});
$('.productNumber').live('mouseout', function() {
t = setTimeout(function(){
divToPutData.hide();
}, 3000);
});
have the setTimeout assigned to a variable, so you can cancel it on hover again 将setTimeout分配给变量,因此您可以在悬停时再次取消它
var hideTimeout;
$('.productNumber').live('blur',function() {
hideTimeout = setTimeout(function() {
divToPutData.hide();
}, 3000);
});
$('.productNumber').live('mouseover',function() {
clearTimeout(hideTimeout);
// Do the show stuff
}
Use the jQuery stop()
to abort any ongoing animation 使用jQuery
stop()
中止所有正在进行的动画
Test it here: http://jsfiddle.net/T7kRr/1/ 在这里测试: http : //jsfiddle.net/T7kRr/1/
jQuery jQuery的
$(".productNumber").hover(
function () {
$(this).find(".productDesc:last").stop(true, true).show();
},
function () {
$(this).find(".productDesc:last").delay(3000).fadeOut();
}
);
HTML 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.