复制代码 代码如下:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript"> <br>$(function(){ <br>var $current_nav = $("#current_nav"); //current元素（当前所在导航项) <br>var current_nav_width = $current_nav.innerWidth(); <br>var current_nav_left = $current_nav.position().left; <br>var $nav_animate_block = $("#nav_animate_block"); //动画滑块 <br>$nav_animate_block.css({ width:current_nav_width, left:current_nav_left }); //初始状态下，动画滑块位置在current元素 <br>// 鼠标进入a元素时触发动画事件 <br>$("#nav_menu a").hover(function(){ <br>var index = $(this).index(); <br>var $a_cur = $("#nav_menu").find("a").eq(index);//鼠标移动到的a元素 <br>//利用触发的a元素索引获取其left位置和它的宽度 <br>var width = $a_cur.innerWidth(); <br>var left = $a_cur.position().left; <br>//设置动画滑块位置 <br>$nav_animate_block.stop().animate({ <br>width: width, <br>left: left <br>}, 300) <br>}, function(){ <br>//鼠标离开a元素时，动画滑块返回current元素位置 <br>$nav_animate_block.stop().animate({ <br>width: current_nav_width, <br>left: current_nav_left <br>}) <br>}) <br>}); <br></script>
