JQuery slideToggle timeout
I have simple html page:
<!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:400开发者_运维百科px; }
</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>
I need to hide the div panel automaticaly after 10 seconds if my mouse cursor isn't over the panel. How can I do it (change the code above) to implement that?
Thanks
Check http://jsfiddle.net/XRYLk/3/
I added mouseleave so in case the mouse was over it when first function fires up, it will set timer on 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); });
Try this code
if($('.to_hide').css("display") == "block")
{
$(".to_hide").mouseout(function(){
setTimeout(hidepara,10000);
})
}
function hidepara()
{ $(".to_hide").hide();
}
Working sample http://jsfiddle.net/kaYLG/
This is a very simple solution. Idea is, if you don't move your mouse over the div-container.. it will slideUp() the container itself in 2000ms (I put 2000ms, because its boring to wait 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 ]
- First it will wait till the document is ready
- It will start the countdown to 2000ms with
setTimeout()and sets it as resource tomouseover_tovariable. - However, if
mouseover()is detected over thedivthen the countdown will be canceled withclearTimeout(), thanks to the help of the resourcemouseover_to
加载中,请稍侯......
精彩评论