鼠标移出时候，停一段时间，在隐藏，如何实现？？


下面例子，鼠标移入时显示一个层， 鼠标移出时候隐藏层。问题是：我想当移出时候，停止1秒在隐藏， 为啥没效果，问题出在哪?
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery.js"></script>
<style type="text/css">

#btn { border:1px solid #000; width:80px; height:40px; background-color:#eee;}

div {border:1px solid red; width:100px; height:100px; background-color:#ccc; position:absolute; left:300px; top:100px; display:none;}
</style>
</head>
<body><script type="text/javascript">$(function(){
$("#btn").mouseover(function(){ $(this).next().show(); }); $("#btn").mouseout( function(){ timer = setTimeout(function(){$(this).next().hide()},1000);  });
})
</script>
<button id="btn">鼠标悬浮</button><div>我是漂浮层</div></body>
</html>

解决方案 »

  1.   

    setTimeout(function(){$(this).next().hide()},1000)，这个是当时就执行了一次，然后再过一秒执行一次
      

  2.   

    将mouseout那句改为
    $("#btn").mouseout( function(){ setTimeout("$(this).next().hide()",1000); });
    试试
      

  3.   

    把：
    $("#btn").mouseout( function(){ timer = setTimeout(function(){$(this).next().hide()},1000); });
    改为：
    $("#btn").mouseout( function(){$(this).next().hide(1000);});
      

  4.   

    一群jquery童子飘过你们能不能写no jquery JS
      

  5.   

                    $("#btn").mouseout(function(){
                          var self=this;
                        timer = setTimeout(function(){
                            $(self).next().hide()
                           }, 1000);
                    });
    作用域问题
      

  6.   

    setTimeout 里面的this是window