/*寬高是背景圖片的*/
    width: 111px;
    height: 50px;

    /*設(shè)置文字垂直水平居中*/
    line-height: 50px;
    text-align: center;

    font-weight: bold;
    font-size: 18px;
    list-style-type:none;
}

    display: block;

    /*我們不使用純黑色*/
    color: #292724;
    text-decoration:none;
}

    /*設(shè)置塊模式顯示，并制定寬高和a的寬高一樣，和絕對(duì)位置，這是為了使其和a里面的文字重合顯示*/
    display: block;
    height: 50px;
    width: 111px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;

    color:#FFE2BB;
}

/*鏈接激活狀態(tài)下的樣式*/
.animation_menu li.current a {
     /*一般灰色高亮背景*/
    background-position: 0 0;
}
    /*hover黃色高亮背景*/
    .animation_menu li.current a span {
        background-position: 0 -51px;
    }

// 綁定hover事件
$(".animation_menu li a span").hover(
    //mouse on事件
    function () {
        // 通過(guò)動(dòng)態(tài)的改變opacity從0到1，這樣span的樣式和文字就會(huì)慢慢的顯示出來(lái)，覆蓋a的樣式
        $(this).stop().animate({
            opacity: 1
        }, "slow");
    },
    //mouse out事件
    function () {
        // 當(dāng)鼠標(biāo)移走的時(shí)候，動(dòng)態(tài)改變?yōu)?，這樣span又看不見(jiàn)了，看到原來(lái)的a的樣式了。
        $(this).stop().animate({
            opacity: 0
        }, "slow");
    }
);

//綁定click事件，點(diǎn)擊當(dāng)前連接，為li添加current class，同時(shí)移除其他li的current class
$(".animation_menu li a").click(function () {
    $(".animation_menu li a").each(function (index, item) {
        $(item).parent().removeClass("current");
    });
    $(this).parent().addClass("current");
});