jQuery 如何显示 div 10 秒然后隐藏它
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4127527/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show div for 10 seconds and then hide it
提问by kobe
I have div block which comes on a mouseover of another div.
我有一个 div 块，它出现在另一个 div 的鼠标悬停上。
div1 img // mouse over shows div2.
div1 img // 鼠标悬停显示 div2。
I want to show div2 for 10 seconds and then hide it , can you please tell me how to achive this
我想显示 div2 10 秒然后隐藏它，你能告诉我如何做到这一点吗？
Thanks
谢谢
回答by ?ime Vidas
$("#div1").mouseenter(function() {
var $div2 = $("#div2");
if ($div2.is(":visible")) { return; }
$div2.show();
setTimeout(function() {
$div2.hide();
}, 10000);
});
Another way to go:
另一种方法：
$("#div1").mouseenter(function() {
var $div2 = $("#div2");
if ($div2.data("active")) { return; }
$div2.show().data("active", true);
setTimeout(function() {
$div2.hide().data("active", false);
}, 10000);
});
回答by FatherStorm
Use jQuery's delay(n); method http://api.jquery.com/delay/
使用 jQuery 的 delay(n); 方法 http://api.jquery.com/delay/
$(function() {
$("#div1 img").hover(function(){
$("#div2").show().delay( 10000 ).hide(0);
});
});
回答by user113716
The accepted answer is the only good one here.
接受的答案是这里唯一的好答案。
I'm leaving an answer because most of the others fail for various reasons.
我要留下一个答案，因为其他大多数都因各种原因而失败。
If you want to use .delay(), the item delayed needs to be part of the queue. The .hide()method is not. But if you give .hide()a duration, it is.
如果要使用.delay()，则延迟的项目需要成为队列的一部分。该.hide()方法是没有的。但是如果你给出.hide()一个持续时间，那就是。
So you can do this:
所以你可以这样做：
var $div2 = $('#div2');
$('#div1').mouseenter(function() {
$div2.show().delay( 10000 ).hide( 0 );
});
The 0duration makes .hide()part of the queue. You don't want to use .hover()because it will fire once for mouseenterand once for mouseleave. This is not what was wanted.
的0持续时间使得.hide()所述队列的一部分。您不想使用，.hover()因为它会触发一次mouseenter又一次 for mouseleave。这不是我们想要的。
Some of the answers using setTimeout()fail because if there are several mouseenterevents, then several setTimeout()calls are made. The accepted answer gets around this.
一些使用setTimeout()失败的答案是因为如果有多个mouseenter事件，则会进行多个setTimeout()调用。接受的答案解决了这个问题。
回答by zzzzBov
as part of the mouseover function:
作为鼠标悬停功能的一部分：
setTimeout(function(d){
item.hide();
}, 10000);
This assumes var itemis the jquery object of the div you want to hide. The parameter 10000is the delay in milliseconds. 10s * 1000ms/1s = 10000ms
这假设var item是您要隐藏的 div 的 jquery 对象。该参数10000是以毫秒为单位的延迟。10s * 1000ms/1s = 10000ms
回答by hunter
$(function() {
$("div1 img").hover(
function() { //mouse over show div
$("div2").show(); //.delay(10000).fadeOut();
},
function() { // mouse out, start timer to hide
//$("div2").delay(10000).fadeOut();
}
);
});
回答by Harmen
var $div2 = $('#div2');
$('#div1').mouseover( function(){
$div2.show();
setTimeout( function(){
$div2.hide();
}, 1000*10);
});
