用jQuery实现的菜单下划线动画效果

清疚 2022-09-19 04:17 253阅读 0赞

前几天在网站看到一个菜单下划线动画效果感觉不错.不过他的效果有缺陷,鼠标快速移动时会导致动画停不下来.

自己拿jQuery写了一个,解决了上面的问题,而且菜单的独立性比较好,不会干扰到页面其他的内容.

借助了jQuery的功效,对各大浏览器的支持也很好~

看演示: [http://www.koyoz.com/demo/html/menu/link.html][http_www.koyoz.com_demo_html_menu_link.html]

布局结构:

XML/HTML代码

1.  **<****div**id="nav"**>**
2.  
3.  **<****ul****>**
4.  **<****li****>****<****a**href="javascript://"**>**首页**</****a****>****</****li****>**
5.  **<****li****>****<****a**href="javascript://"**>**日志**</****a****>****</****li****>**
6.  **<****li****>****<****a**href="javascript://"**>**相册**</****a****>****</****li****>**
7.  **<****li****>****<****a**href="javascript://"**>**播客**</****a****>****</****li****>**
8.  **<****li****>****<****a**href="javascript://"**>**互动**</****a****>****</****li****>**
9.  **<****li****>****<****a**href="javascript://"**>**游戏**</****a****>****</****li****>**
10. **</****ul****>**
11. 
12. **<****div**id="koyoz"**>****</****div****>**
13. **</****div****>**

JS代码:

JavaScript代码

1.  $(**function**()\{ 
2.   $("\#nav a").mouseover(**function**() \{ 
3.  **var** left = $(**this**).offset().left - $("\#nav").offset().left; 
4.  **var** fly = $("\#koyoz"); 
5.  **if** (fly.is(":animated")) \{ 
6.   fly.stop(); 
7.   \} 
8.   fly.animate(\{ 
9.   marginLeft:left 
10.  \}, 500); 
11.  \}) 
12. \})

够简单吧.

[http_www.koyoz.com_demo_html_menu_link.html]: http://www.koyoz.com/demo/html/menu/link.html

发表评论取消回复

表情：

评论列表（有 0 条评论，253人围观）

还没有评论，来说两句吧...

相关阅读

相关用jQuery编写简单的动画效果

jQuery是一种基于JavaScript库的快速、小型而且特别丰富的JavaScript库。它极大地简化了HTML文档遍历和操作、事件处理、动画效果和AJAX交互等功能。jQ

爱被打了一巴掌/ 2024年03月24日 21:12/ 0 赞/ 79 阅读

相关 jQuery - 效果动画

前言： jQuery给我们封装了很多的动画效果，相比起简单传统的CSS来说，功能强大很多，今天就来学习学习 jQuery给我们封装的一系列的动画

迈不过友情╰/ 2023年06月15日 07:30/ 0 赞/ 84 阅读

相关导航菜单中常用的css下划线动画效果-案例

> 导航栏下划线动画在网页设计中是非常常见的交互 [在线展示][Link 1] ![20210625131926419.gif][] [代码][Link 2]

本是古典何须时尚/ 2022年10月10日 01:30/ 0 赞/ 291 阅读

相关用jQuery实现的菜单下划线动画效果

前几天在网站看到一个菜单下划线动画效果感觉不错.不过他的效果有缺陷,鼠标快速移动时会导致动画停不下来. 自己拿jQuery写了一个,解决了上面的问题,而且菜单的独立性比较好,

清疚/ 2022年09月19日 04:17/ 0 赞/ 254 阅读

相关 jQuery动画效果

学习要点： 1.显示、隐藏 2.滑动、卷动 3.淡入、淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性在以前很长一段时间里，网页上的

古城微笑少年丶/ 2022年08月18日 15:13/ 0 赞/ 258 阅读

相关 jQuery UI实现动画效果

效果实现描述：页面文档载入后，为第一张图片添加class属性值为img1，为第二张图片添加class属性值img2，为第三张图片添加class属性img3，为第

绝地灬酷狼/ 2022年06月15日 06:16/ 0 赞/ 353 阅读

相关 Jquery实现子菜单散开动画

> Jquery的`animate()`方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画

淡淡的烟草味﹌/ 2022年06月08日 00:44/ 0 赞/ 194 阅读

相关 jQuery动画效果——点赞动画效果

任务描述本关任务：掌握jQuery常见的动画效果——自定义动画。实现的效果如下： ![206510][] 相关知识为了完成本关任务，你需要掌握：1.平移动画，

清疚/ 2022年04月05日 13:44/ 0 赞/ 480 阅读

相关 jQuery方式实现动画菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

太过爱你忘了你带给我的痛/ 2022年01月27日 12:07/ 0 赞/ 250 阅读

相关 jQuery--菜单显示效果

前言内容显示效果： HTML代码： CSS代码： J

深藏阁楼爱情的钟/ 2021年09月27日 04:50/ 0 赞/ 447 阅读