鼠标滑过显示子类浮层

<html>
<head>
<title>TEST</title>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
</head>

<style>
    #switch{width:100px;height:36px;line-height:36px;border:1px solid #e6e6e6;position:relative;}
    #layer{width:200px;height:200px;background-color:red;opacity:0;margin-top: 0;position:absolute;left:0;top:0;}
</style>
<body>
    <div id="switch">
        hover me
        <div id="layer">新的一层</div>
    </div>
<script type="text/javascript">
    $("#switch").mouseenter(function(){
        $("#layer").stop().animate( {opacity:"1", top:"36px"},"slow").show();
    });
    $("#switch").mouseleave(function(){
        $("#layer").stop().animate( {opacity:"0", top:"0px"},"slow");
    });
</script>
</body>
</html>

页面结构最好是包含关系，即滑过父类（#switch），显示子类浮层（#layer），且无缝连接，否则会鼠标滑过的时候一闪一闪的。

写了一个css最简单的，":hover"父级实现的显示子类。发现在页面最上面的时候，偶尔子类会显示不出来（bug是chrome浏览器复现的，且另开窗口或者打开控制台，bug都会消失），解决的办法是鼠标滑出的时候加setTimeout()，以上的时候clearTimeout()。