原生JS与jQuery实现横向导航菜单动画效果对比

作者：页面旅途时间：2026-10-30 06:26:06浏览：122

本文详细对比了使用原生JavaScript和jQuery两种技术实现横向导航菜单悬停动画的方法。原生JS通过setInterval定时器手动控制宽度变化，需处理边界判断与动画清除；jQuery则利用animate方法简化代码，实现更简洁的宽度动态调整。文章提供了完整的代码示例及效果解析，帮助开发者理解不同实现方式的优劣。

导航菜单动画效果概述

本文分享原生JavaScript与jQuery实现横向导航菜单的具体方法，供读者参考。

原生JavaScript实现方案

首先介绍原生JavaScript的实现方案。目标是实现鼠标悬停时菜单项水平拉伸、鼠标移开后水平收缩的动画效果，并具备可见的时间延迟。初始状态下，导航栏第一栏及选中栏的背景色设为黑色，文字颜色设为白色，CSS样式为.on,a:hover{background:#000000;color:#FFFFFF;}。

接下来编写JavaScript脚本逻辑。


<script> 
 window.onload=function(){ 
 var A=document.getElementsByTagName("a"); 
  
 for(var i=0;i<A.length;i++) 
 { 
  A[i].onmouseover=function(){ 
  clearInterval(this.time); 
   var This=this; 
   This.time=setInterval(function(){ 
    
   if(This.offsetWidth>=200) 
    { 
    clearInterval(This.time); 
    } 
   This.style.width=This.offsetWidth+8+"px"; 
     
   },50) 
  } 
   
   A[i].onmouseout=function(){ 
   clearInterval(this.time); 
   var This=this; 
   This.time=setInterval(function(){ 
   if(This.offsetWidth<=120) 
    { 
    This.style.width="120px"; 
    clearInterval(This.time); 
    } 
   This.style.width=This.offsetWidth-8+"px"; 
    
   },50) 
  } 
   
   
  } 
   
 } 
  
 </script>

代码逻辑解析如下：第一层为window.onload，确保页面加载完成后执行函数。第二层使用for循环遍历document.getElementsByTagName("a")获取的所有导航链接数组，并为每个元素绑定事件。第三层分别定义onmouseover和onmouseout事件，处理鼠标移入和移出的行为。第四层引入setInterval和clearInterval方法，时间间隔设为50ms。第五层为核心逻辑，通过修改this.style.width实现宽度变化，每次增减8px，并添加边界判断。细节方面：先执行加减8px操作再进行边界判断，以减少资源浪费；在事件触发前必须清除之前的定时器，防止动画重叠混乱。最终效果为：鼠标悬停时，120px宽的菜单项每50ms增加8px，直至达到200px停止；鼠标移开时，每50ms减少8px，恢复至120px。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>导航栏</title> 
<style> 
*{margin:0;padding:0;font-size:20px} 
ul{list-style:none;height:50px;border-bottom:#000000 solid;padding-left:30px}  
li{float:left;margin-top:20px;} 
a{text-decoration:none;display:block;height:30px;line-height:30px;width:120px;margin-bottom:1px;background:#FFFFFF;color:#000000;text-align:center} 
.on,a:hover{background:#000000;color:#FFFFFF;} 
</style> 
<script> 
 window.onload=function(){ 
 var A=document.getElementsByTagName("a"); 
  
 for(var i=0;i<A.length;i++) 
 { 
  A[i].onmouseover=function(){ 
  clearInterval(this.time); 
   var This=this; 
   This.time=setInterval(function(){ 
    
   if(This.offsetWidth>=200) 
    { 
    clearInterval(This.time); 
    } 
   This.style.width=This.offsetWidth+8+"px"; 
     
   },50) 
  } 
   
   A[i].onmouseout=function(){ 
   clearInterval(this.time); 
   var This=this; 
   This.time=setInterval(function(){ 
   if(This.offsetWidth<=120) 
    { 
    This.style.width="120px"; 
    clearInterval(This.time); 
    } 
   This.style.width=This.offsetWidth-8+"px"; 
    
   },50) 
  } 
   
   
  } 
   
 } 
  
 </script> 
</head> 
<ul> 
<li> 
<a class="on" href="#">首 页</a> 
</li> 
<li> <a href="#">今日新闻</a></li> 
<li><a href="#">周边故事</a></li> 
<li><a href="#">天气预报</a></li> 
<li><a href="#">好书推荐</a></li> 
</ul> 
</html>

导航菜单动画效果概述

jQuery实现方案对比

随后展示使用jQuery实现相同效果的方案。首先需要下载并引用jQuery 1.2.6版本库至HTML文件中。


<script type="text/javascript" src="jquery-1.2.6.js"></script> 
下载地址：Jquery1.2.6下载
[html] view plain copy print?
<script> 
$(function(){ 
 
 $('a').hover( 
  
  function(){ 
   $(this).stop().animate({"width":"200px"},200  );}, 
  function(){ 
   $(this).stop().animate({"width":"120px"},200 
   );}  
 ) 
 }) 
 
</script>

jQuery代码同样包裹在$(function(){})中，等效于window.onload。通过$('a')选择所有链接元素，利用hover方法绑定移入和移出两个回调函数。移入时宽度在200ms内增加至200px，移出时宽度在200ms内收缩至120px。核心方法是animate，用于设置宽度的动态变化。在处理动画前调用stop()以清除之前的动画队列。虽然效果一致，但jQuery实现代码量更少。

以上为本文全部内容，希望能为读者学习提供有益帮助。

作者最新文章

JS监听滚动事件：回到顶部按钮的显示与隐藏逻辑

2026-11-05 16:19:37

JavaScript怎么读写LocalStorage与SessionStorage

2026-11-05 15:40:11

anime.js 与 GSAP 对比：轻量级项目该怎么选择动画库

2026-11-05 11:24:55

flv.js 与 hls.js 在直播场景下的选型对比

2026-11-05 08:18:52

JavaScript能做什么？前端开发中的作用与应用场景解析

2026-11-04 23:17:54