jQuery菜单滑动

jQuery底部可滑动的导航菜单代码，鼠标经过导航时底部横线会自动滑动

淘建站为您提供更多_导航菜单_滑动导航_滑动_动画，在此特别感谢您对我们的支持与厚爱！

导航菜单html代码和滑动底线.tips

<div class="navs_area">
    <div class="tips"></div>
    <ul class="mainLeftNav">
        <li class="">网站模版</li>
        <li class="cur">网站源码</li>
        <li class="">网页特效</li>
    </ul>
</div>

animate 动画

function mainleftnav() {
    var left = 0, width = 0, obj = $(".tips");
    $(".navs_area").find("li").each(function() {
        if ($(this).hasClass("cur")) {
            left = $(this).position().left;
            width = $(this).outerWidth();
            setTimeout(function() {
                obj.stop(true, false).animate({left: left, width: width});
            }, 500);

        }
        $(this).hover(function() {
            var l = $(this).position().left, w = $(this).outerWidth();
            obj.stop(true, false).animate({left: l, width: w});
        }, function() {
            obj.stop(true, false).animate({left: left, width: width});
        });
    });
}
$(function() {
    mainleftnav()
})