本文详细对比了使用原生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实现代码量更少。
以上为本文全部内容，希望能为读者学习提供有益帮助。