1 //比较两种方式的不同，方式二会出现抖动的bug 2  3 $(document).ready(function(e) {                                    4      5       //方式一 6       $(‘#cont‘).hover ( function () { 7             $("#nav").animate({bottom: "0px"},150); 8         }, function () { 9             $("#nav").animate({bottom: "-50px"},150);;10        }); 11         12       //方式二  13         $("#cont1").on("mouseover",function(){14          $("#nav1").animate({bottom: "0px"},150);15          }).on("mouseout",function(){16         $("#nav1").animate({bottom: "-50px"},150);17     })         18 });

1 .cont{width:300px;height:200px;border:1px solid yellowgreen;margin:0px auto;position:relative;overflow:hidden;float:left;margin-right:50px;}2 .nav{width:300px;height:50px;background:#abcdef;position:absolute;left:0px;bottom:-50px;}

1     <div class="cont" id="cont">2         <div id="nav" class="nav"> </div>3     </div>4     5     <div class="cont" id="cont1">6         <div id="nav1" class="nav"> </div>7     </div>