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

 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>

 

posted @ 2014-10-18 18:52  未来动力  阅读(792)  评论(0)    收藏  举报