【特效】体验很好的导航hover效果移出恢复当前位置

时间:2021-09-18 14:08:08

很常见的一种导航的hover效果,鼠标放上后除了正常的hover,在移出整个导航后,会恢复当前栏目的特殊样式,分别有横向和纵向的导航。代码也比较简单,设置一个当前栏目的class,用index()找到当前的位置,再用animate把hover效果的“滑动块”移动到相应位置。这里需注意animate中queue:false这一句必不可少,其作用是让这个animate不进入默认的动画队列中,这样在鼠标移动过程中,不会产生频频跳动的感觉。

说的比较啰嗦,具体看代码好了。

效果预览:

横向导航:http://www.gbtags.com/gb/rtreplayerpreview-standalone/2769.htm

纵向导航:http://www.gbtags.com/gb/rtreplayerpreview-standalone/2770.htm

源码下载:http://pan.baidu.com/s/1i4eHzhV