JQuery 幻灯片切换超时
Posted
技术标签:
【中文标题】JQuery 幻灯片切换超时【英文标题】：JQuery slideToggle timeout 【发布时间】：2011-09-23 11:50:40 【问题描述】：我有一个简单的 html 页面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function()
$("button").click(function()
$("div").slideToggle("slow");
);
);
</script>
<style>
div width:400px;
</style>
</head>
<body>
<button>Toggle</button>
<div style="border: 1px solid">
This is the paragraph to end all paragraphs. You
should feel <em>lucky</em> to have seen such a paragraph in
your life. Congratulations!
</div>
</body>
</html>
如果我的鼠标光标不在面板上，我需要在 10 秒后自动隐藏 div 面板。 我该怎么做（更改上面的代码）来实现它？
谢谢
【问题讨论】：
【参考方案1】：查看http://jsfiddle.net/XRYLk/3/
我添加了 mouseleave，所以如果第一个函数启动时鼠标在它上面，它会在 mouseleave 上设置计时器。
jQuery：
$("button").click(function()
$("div").slideToggle("slow");
);
setTimeout(hidepanel, 4000);
function hidepanel()
if($('div').is(':hover') === false) $('div').slideToggle();
$('div').mouseleave(function() setTimeout(hidepanel, 4000); );
【讨论】：
【参考方案2】：试试这个代码
if($('.to_hide').css("display") == "block")
$(".to_hide").mouseout(function()
setTimeout(hidepara,10000);
)
function hidepara()
$(".to_hide").hide();
工作样本http://jsfiddle.net/kaYLG/
【讨论】：
【参考方案3】：这是一个非常简单的解决方案。想法是，如果您不将鼠标移到 div-container 上.. 它会在 2000 毫秒内 slideUp() 容器本身（我放了 2000 毫秒，因为等待 10sec 很无聊）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
div width: 400px; border: 1px solid;
</style>
</head>
<body>
<div>
This is the paragraph to end all paragraphs. You should feel <em>lucky</em> to have seen such a paragraph in your life. Congratulations!
</div>
<script>
$(document).ready(function ()
var mouseover_to = setTimeout(function ()
$("div").slideUp("slow");
, 2000); // Change it to 10000 to be 10sec
$('div').mouseover(function ()
clearTimeout(mouseover_to);
);
);
</script>
</body>
</html>
[View output]
-
首先它会等到文档准备好
它将使用
setTimeout() 开始倒计时到2000 毫秒，并将其设置为mouseover_to 变量的资源。
但是，如果在div 上检测到mouseover()，则倒计时将用clearTimeout() 取消，这要感谢资源mouseover_to 的帮助
【讨论】：
以上是关于JQuery 幻灯片切换超时的主要内容，如果未能解决你的问题，请参考以下文章