鼠标悬停时从底部滑出文字信息

 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>