JQuery模拟FLASH导航菜单动画效果

.nav li .snav {font-size:0px; width:730px; height:44px; position:absolute; left:-200px; top:65px; border-top:2px solid #FF3C00; display:none;}
.nav li .snav a{ position:relative; margin:0 0px; width:70px; color:#444; height:44px; line-height:40px; display:inline-block; font-size:12px; font-weight:normal;}
.nav li .snav a span {position:absolute; left:0; width:70px; height:39px; line-height:39px; width:70px; cursor:pointer;}
.nav li .snav a span.out {top:0px;}
.nav li .snav a span.over,.nav li .snav a span.bg {top: -44px; }
.nav li .snav a span.over {color:#FFF;}
.nav li .snav a span.bg {height:44px; background:#FF510C; border-radius:0 0 5px 5px;}
.nav li .snav a.cur span.over,.nav li .snav a.cur span.bg {top: 0;}
.navBg { background:url(s/snavBg.jpg) no-repeat; width:1000px; height:0px; overflow:hidden; position:absolute; top:67px; left:0; text-align:center;  z-index:2; }$("#nav>li>a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );
$("#nav>li>a").each(function() {
 $( '<span class="over"><strong>' +  $(this).text() + '</strong></span>' ).appendTo( this );
});

$("#nav>li>a:not('.cur')").hover(function() {
 $(".out",this).stop().animate({'top':'65px'},250); // 向下滑动 - 隐藏
 $(".over",this).stop().animate({'top':'0px'},250); // 向下滑动 - 显示
 $(".bg",this).stop().animate({'top':'0px'}, 120); // 向下滑动 - 显示
}, function() {
 $(".out",this).stop().animate({'top':'0px'},250); // 向上滑动 - 显示
 $(".over",this).stop().animate({'top':'65px'},250); // 向上滑动 - 隐藏
 $(".bg",this).stop().animate({'top':'65px'},120); // 向上滑动 - 隐藏
});

$("#nav>li:not(':first'):not(':last')").hover(function() {
 $(".navBg").stop().animate({'height':'44px'},120);
 $(this).children(".snav").stop(true).css({"left":- $(this).position().left}).show();
}, function() {
 $(".navBg").stop().animate({'height':'0px'},120);
 $(this).children(".snav").stop(true).hide();
});

$(".snav>a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );
$(".snav>a").each(function() {
 $( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
});

$(".snav>a:not('.cur')").hover(function() {
 $(".out",this).stop().animate({'top':'-44px'},250); // 向上滑动 - 隐藏
 $(".over",this).stop().animate({'top':'0px'},250); // 向上滑动 - 显示
 $(".bg",this).stop().animate({'top':'0px'}, 120); // 向上滑动 - 显示
}, function() {
 $(".out",this).stop().animate({'top':'0px'},250); // 向下滑动 - 显示
 $(".over",this).stop().animate({'top':'-44px'},250); // 向下滑动 - 隐藏
 $(".bg",this).stop().animate({'top':'-44px'},120); // 向下滑动 - 隐藏
});