的JQuery的slideToggle超时

我有简单的HTML页面：的JQuery的slideToggle超时

<!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秒后automaticaly隐藏格板，如果我的鼠标光标不在面板。我该怎么做（改变上面的代码）来实现它？

感谢

来源

2011-09-23 ihorko

面板= DIV-容器的帮助？ –

检查http://jsfiddle.net/XRYLk/3/

我加鼠标离开这样的情况下，鼠标滑过时，当第一个功能火灾时，它会设置计时器上的鼠标离开。

的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); });

来源

2011-09-23 12:11:59 Tumharyyaaden

试试这个代码

if($('.to_hide').css("display") == "block") 
{ 
    $(".to_hide").mouseout(function(){ 

     setTimeout(hidepara,10000); 
    }) 
} 
function hidepara() 

    { $(".to_hide").hide(); 

}

工作样本http://jsfiddle.net/kaYLG/

来源

2011-09-23 12:15:55

这是一个非常简单的解决方案。想法是，如果你不把鼠标移到div容器上，它会在2000ms（我放2000ms，因为它无聊等待10sec）而使容器本身变为slideUp()。

<!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()到2000MS，并将它作为资源mouseover_to变量。
但是，如果在div然后倒计时检测mouseover()将与clearTimeout()取消，得益于资源mouseover_to

来源

2011-09-23 12:16:15

的JQuery的slideToggle超时

回答

相关问题