<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），且无缝连接，否则会鼠标滑过的时候一闪一闪的。
原文：http://www.cnblogs.com/guaiyutou/p/4121182.html