jQuery鼠标悬停上下滑动导航条

分类: 菜单导航
时间: 2017-05-23 10:19:05
编辑: 墨倾天下
浏览: 1072

下载次数：6 文件大小：35.43KB 所需积分：0 QQ联系购买积分：3331653644（1元=10积分）

$(document).ready(function() {
    $("#menu2 li a").wrapInner( '<span class="out"></span>' );
    $("#menu2 li a").each(function() {
        $( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
    });
    $("#menu2 li a").hover(function() {
        $(".out", this).stop().animate({'top': '48px'}, 300);
        // move down - hide
        $(".over", this).stop().animate({'top': '0px'}, 300);
        // move down - show
    }, function() {
        $(".out", this).stop().animate({'top': '0px'}, 300);
        // move up - show
        $(".over", this).stop().animate({'top': '-48px'}, 300);
        // move up - hide
    });
});

标签:

jquery 导航