jquery列表动画

    //新闻导航
    (function (){
        
        //获取分类名称
        var _text = $('.news .news-wrapper .news-left .news-left-title .position a').eq(1).text();
        _text = $.trim(_text);

        var _a = $('.news .news-wrapper .news-right .news-nav .news-nav-list a')
        var _height = _a.height() +1;
        var _line = $('.news .news-wrapper .news-right .news-nav .news-nav-list .line');
        var _top = _line.css('top');
        
        //动画
        var _move = function(num){
            _line.stop(true,false).animate({top: (num-1) * _height},100);
            _a.eq(num-1).css('color','#897544').siblings().css('color','#333')

        }

        //判断当前分类
        _a.each(function(){
            $text = $(this).text();
            $text = $.trim($text);
            if($text == _text){
                $index = $(this).index();
                _move($index); 

            }
        })
        
        //鼠标进入
        $('.news .news-wrapper .news-right .news-nav .news-nav-list a').mouseover(function() {
            $_index = $(this).index();
            _a.eq($index-1).css('color','#897544').siblings().css('color','#333')
            _move($_index);
        });

        //鼠标离开
        $('.news .news-wrapper .news-right .news-nav .news-nav-list').mouseout(function() {
            _move($index);
            return false
        });
    })();

<div class="news-nav-list">
    <i class="line"></i>
	<a href="">财经资讯</a>
	<a href="">原油资讯</a>
	<a href="">机构观点</a>
	<a href="">交易策略</a>
	<!-- <a href="">我要开户</a> -->
	<a href="">今日数据</a>
	<a href="">每日油评</a>
	<a href="">软件下载</a>
	<a href="" class="no-border">关于我们</a>
</div>

根据分类初始化导航，当鼠标移入导航时根据导航的当前的下标，确定line的位置，当鼠标移开导航的时候，line返回初始位置