天天看点

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

是通过jqury的animate方法来写的一个交互效果,当然他 觉得动画有一些卡,所以他用延时处理的方法,避免动画卡,方法可以值得借鉴。我自己用hover方法,然后动画时间设置的更短,为100毫秒,动画运行起来,速度还行。

正好自己最近需要完成一个系统的导航条的滑动效果,具体是说,hover上导航条的一个选项,此时有一个背景(可以是纯色的背景或一张渐变的图片),实例我演示用的是纯色的背景,省的去弄图片背景。demo截图如下图所示:

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

代码如下,在代码进行注释说明:

工作原理大致:在a标签中设置2个div,一个是导航条的标题,另外一个就是要向上滑动的

层。为了一开始不出现滑动的层,所以对a标签的position设置为relative,并且overflow设置为hidden,不能对li进行

hidden,因为一般情况下,导航条下有下拉菜单。对2个div的position设置为absolute。然后在hover的方法里面,对

hover_bg这个层的top值进行动画变化,达到背景色块向上运动的一个交互效果。在动画时间设置上,我写的是“fast”,在3个浏览器上测试,动

画还算流畅,所以暂且没有考虑用延时去处理动画卡顿的问题。

ps:

1.估计是年底了,网页很多被运营商劫持了,当然也有可能是我的电脑中毒了。如下图所示的广告,我点击关闭按钮,直接跳转到一个游戏注册页面。无语了,截图为证,上海10m电信宽带。

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

继续阅读