超炫的jquery仿flash导航栏特效

            <div class=”menu_b back6″></div> 
            <span>测试</span> 
        </div> 
        </div> 
</body> 
</html> 
 

$(document).ready(function(){ 
    $(“.menu”).mouseover(function(){ 
        var div = $(this).children(“.menu_b”); 
        var span = $(this).children(“span”); 
        //隐藏字体，往右移动20px 
        span.stop(true,false).animate({opacity:’0′,left:’20px’},200); 
        //显示背景动画 
        div.stop(true,false).animate({width:’100px’,marginLeft:’-50px’,height:’1px’,opacity:’1′},300); 
        div.animate({height:’40px’,marginTop:’-20px’,opacity:’1′},300); 
        //显示字体，往左移动20px 
        span.animate({opacity:’1′,left:’0px’},300); 
        span.css({color:’#FFF’}); 
    }); 
 
    $(“.menu”).mouseout(function(){ 
        var div = $(this).children(“.menu_b”); 
        var span = $(this).children(“span”); 
        //隐藏字体，往左移动20px 
        span.stop(true,false).animate({opacity:’0′,left:’20px’},200); 
        //显示背景动画 
        div.stop(true,false).animate({height:’1px’,marginTop:’0px’,opacity:’1′},300); 
        div.animate({width:’0px’,marginLeft:’0px’,opacity:’1′},300); 
        //显示字体，往右移动20px 
        span.animate({opacity:’1′,left:’0px’},300); 
        span.css({color:’#777′}); 
    }); 
});