首页 > PHP资讯 > HTML5培训技术 > 使用jQuery的animate方法制作滑动菜单

使用jQuery的animate方法制作滑动菜单

HTML5培训技术
周末看Ziv小威的博客《制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿》,参见地址:http://www.cnblogs.com/zivxiaowei/p/3462964.html。是通过jQury的animate方法来写的一个交互效果,当然他 觉得动画有一些卡,所以他用延时处理的方法,避免动画卡,方法可以值得借鉴。我自己用hover方法,然后动画时间设置的更短,为100毫秒,动画运行起来,速度还行。
 
正好自己最近需要完成一个系统的导航条的滑动效果,具体是说,hover上导航条的一个选项,此时有一个背景(可以是纯色的背景或一张渐变的图片),实例我演示用的是纯色的背景,省的去弄图片背景。demo截图如下图所示:
 
代码如下,在代码进行注释说明:
 
   
   
    <script src="http://code.jquery.com/jquery-latest.js">《script》
 
   
       
  • 上测试,动画还算流畅,所以暂且没有考虑用延时去处理动画卡顿的问题。
  • HTML5培训技术

    本文由欣才IT学院整理发布,未经许可,禁止转载。
    支持34不支持0