jquery实现停留几秒中弹出div jquery中hover鼠标一经过指定元素就起作用想让鼠标在指定元素上停留几秒钟,再弹出div怎么实现谢谢 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <!doctype html><html> <head> <meta charset="gb2312" /> <style> #box { width:100px; height:100px; border:1px solid red; display:none; } </style> </head> <body> <div id="test">测试</div> <div id="box"></div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script> $('#test').mouseover(function(){ $('#box').delay(1000).slideDown() }) </script> </body></html>楼主试试。 不对啊 ,代码虽然是等1秒后弹出div但不是鼠标一直指在test上才触发事件而是只要鼠标指上去,1秒后就睡触发 这么简单的功能,根本用不到JQ。function theforever_csdn() { 用setTimeout延时一秒显示你的DIV; }document.getElementById("box").onmouseenter=theforever_csdn; onmouseenter这是个什么事件和onmouseover又有什么不同 在onmouseover事件里添加setTimeout在onmouseout事件里添加clearTimeout 如何在settimeout里添加显示div的代码 可以将"添加显示div的代码"放到一个function里面,然后调用就好了啊? 用 $('#test').mouseover(function(){ settimeout("fn()",1000);})function fn(){ $("#div").css("display","block");} 举个例子吧比如:<div id="hover">hover</div><div id="display">display</div>如何让鼠标在hover上停留一秒钟再显示display鼠标离开hover一秒钟再隐藏display求代码解释谢谢 $(function(){ var over,out; $("#hover").mouseover(function(){ var display = $("#display"); if(display.css("display") == "none"){ over = window.setTimeout(function(){ display.show(); },1000); } clearTimeout(out); }).mouseout(function(){ var display = $("#display"); if(display.css("display") == "block"){ out = window.setTimeout(function(){ display.hide(); },1000); } clearTimeout(over); }); }); var showHandler=null;$('#test').mouseover(function(){ var showHandler = setTimeout(function(){$('#box').show();} ,1000*1);}).mouseout(function(){ if(showHandler){clearTimeout(showHandler);} $('#box').hide();});补充1楼的js 那个,,厚着脸皮问一句怎么把它应用到html上 好用了那个,这两句clearTimeout(out);clearTimeout(over);这两句有什么用 var begin;$('#test').mouseover(function(){ begin =setTimeout("fn()",1000);})function fn(){ clearTimeout(begin);}这个是jquery的写法,意思跟大家的差不多了。。mouseover的时候开启setTimeout,一旦离开的时候马上关闭。如果时间超过1秒那么自动执行fn() 写错了不好意思等下附上JQUERY的写法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #box { width:100px; height:100px; border:1px solid red; display:none; } </style></head> <body> <div id="test">测试</div> <div id="box">鼠标已停留1秒钟</div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script> var timer; $('#test').mouseover(function(){ var elem = $(this); timer = setTimeout(function(){ $('#box').show(); }, 1000); }); $('#test').mouseout(function(){ clearTimeout(timer); }); </script></body> </html> 多谢,找了很久jQuery插件,但是我只是要延迟几秒钟,那些插件都不适合,非常感谢,delay()这个方法很好用 ext做如下表格 JS代码 在IE里可以执行 在遨游和 360里都不执行 JS代码 在IE里可以执行 在遨游和 360里都不执行 求个正则表达式?非常急谢谢 页面如何连接数据库啊?急急急!九万火急! 我的网页填表功能,可否实现? 怎样获得Iframe链接里的HTML标记 根据状态显示不同的div 传值没有成功 跨单元格的元素引用问题 js 函数名冲突 问题 求大神解决 求JS倒计时脚本!输入日期得到天数 JQUERY
<!doctype html>
<html>
<head>
<meta charset="gb2312" />
<style>
#box {
width:100px; height:100px; border:1px solid red; display:none;
}
</style>
</head>
<body>
<div id="test">测试</div>
<div id="box"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$('#test').mouseover(function(){
$('#box').delay(1000).slideDown()
})
</script>
</body>
</html>
楼主试试。
不对啊 ,代码虽然是等1秒后弹出div但不是鼠标一直指在test上才触发事件而是只要鼠标指上去,1秒后就睡触发
如何在settimeout里添加显示div的代码
settimeout("fn()",1000);
})
function fn(){
$("#div").css("display","block");
}
举个例子吧比如:
<div id="hover">hover</div>
<div id="display">display</div>如何让鼠标在hover上停留一秒钟再显示display
鼠标离开hover一秒钟再隐藏display求代码解释谢谢
$(function(){
var over,out;
$("#hover").mouseover(function(){
var display = $("#display");
if(display.css("display") == "none"){
over = window.setTimeout(function(){
display.show();
},1000);
}
clearTimeout(out);
}).mouseout(function(){
var display = $("#display");
if(display.css("display") == "block"){
out = window.setTimeout(function(){
display.hide();
},1000);
}
clearTimeout(over);
});
});
$('#test').mouseover(function(){
var showHandler = setTimeout(function(){$('#box').show();} ,1000*1);
}).mouseout(function(){
if(showHandler){clearTimeout(showHandler);}
$('#box').hide();
});补充1楼的js
那个,,厚着脸皮问一句怎么把它应用到html上
好用了那个,这两句clearTimeout(out);
clearTimeout(over);这两句有什么用
$('#test').mouseover(function(){
begin =setTimeout("fn()",1000);
})
function fn(){
clearTimeout(begin);
}这个是jquery的写法,意思跟大家的差不多了。。mouseover的时候开启setTimeout,一旦离开的时候马上关闭。如果时间超过1秒那么自动执行fn()
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#box {
width:100px; height:100px; border:1px solid red; display:none;
}
</style>
</head>
<body>
<div id="test">测试</div>
<div id="box">鼠标已停留1秒钟</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
var timer;
$('#test').mouseover(function(){
var elem = $(this);
timer = setTimeout(function(){
$('#box').show();
}, 1000);
});
$('#test').mouseout(function(){
clearTimeout(timer);
});
</script>
</body>
</html>