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>
