当前位置:96看吧 > 实用代码 > 导航菜单 > 平滑动画的jQuery导航菜单

平滑动画的jQuery导航菜单

时间:2013/07/22
作者:96看吧
来源:96看吧
查看:

平滑动画的jQuery导航菜单

导航菜单属于jQuery导航菜单,具有平滑动画效果的jQuery导航菜单,使用jQuery类库加插件实现的导航菜单,适用于博客站,调用方法简单,96看吧推荐使用。

演示文件中我加有代码,请下载本地删除后预览效果更佳。

animated-menu.js中的代码,也是该效果的核心代码,使用前记得引入jquery.js和jquery.easing.1.3.js

  1. $(document).ready(function(){  
  2.       
  3.     //Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/  
  4.       
  5.     //Remove outline from links  
  6.     $("a").click(function(){  
  7.         $(this).blur();  
  8.     });  
  9.       
  10.     //When mouse rolls over  
  11.     $("li").mouseover(function(){  
  12.         $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
  13.     });  
  14.       
  15.     //When mouse is removed  
  16.     $("li").mouseout(function(){  
  17.         $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
  18.     });  
  19.       
  20. }); 
上一篇:Windows8风格的jQuery导航菜单模板
下一篇:Apple网站风格的动感导航菜单
演示地址
Demo
下载地址
Down
页面举报
Report
关闭页面
Close
收藏页面
Favorites
分享页面
Share
版权信息:栏目内,站内会员所分享的全部“资源/素材/文章”,仅供学习与参考,版权为原作者所有。
下载提示:非注册用户每天可下载一个文件,已注册会员不受限制。
相关最新
相关热门