如何實現點擊頁面菜單圖片替換並且有動畫效果

function animation(id){

   /*   ------------

動畫效果通過css來實現的，在實現之前需要移除需要動畫效果的div的class

爲了不泄密，拷貝了部分代碼過來，呵呵呵

-----------------------*/
        $("#login").removeClass();
        $("#gonggaolan").removeClass();
       
        if(id == 1){
            $("#login").addClass("scaleIn");
            $("#gonggaolan").addClass("scaleOut");

           
            $("#login_img").attr("src","/eportal/images/phoneOneNew/dl_color.png");
            $("#ggl_img").attr("src","/eportal/images/phoneOneNew/ggl_grey.png");

           
        }else if(id == 2){
            $("#gonggaolan").addClass("scaleIn");
            $("#login").addClass("scaleOut");
 
           
            $("#login_img").attr("src","/eportal/images/phoneOneNew/dl_grey.png");
            $("#ggl_img").attr("src","/eportal/images/phoneOneNew/ggl_color.png");

           
        }
    }

--------------------------css------------------

.scaleIn{
    z-index: 22;
    -webkit-animation-delay: .2s;
    -webkit-animation-timing-function: ease-in;
    -moz-animation-delay: .2s;
    -moz-animation-timing-function: ease-in;
    -o-animation-delay: .2s;
    -o-animation-timing-function: ease-in;
    -ms-animation-delay: .2s;
    -ms-animation-timing-function: ease-in;
    animation-delay: .2s;
    animation-timing-function: ease-in;
   
    -webkit-animation-name: scaleIn;
    -moz-animation-name: scaleIn;
    -ms-animation-name: scaleIn;
    -o-animation-name: scaleIn;
    animation-name: scaleIn;
   
    -webkit-animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
   
    -moz-animation-duration: 0.5s;
    -moz-animation-fill-mode: both;
   
    -o-animation-duration: 0.5s;
    -o-animation-fill-mode: both;
   
    -ms-animation-duration: 0.5s;
    -ms-animation-fill-mode: both;
   
    animation-duration: 0.5s;
    animation-fill-mode: both;
}
.scaleOut{
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-name: scaleOut;
    -moz-animation-name: scaleOut;
    -ms-animation-name: scaleOut;
    -o-animation-name: scaleOut;
    animation-name: scaleOut;
   
    -webkit-animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
   
    -moz-animation-duration: 0.5s;
    -moz-animation-fill-mode: both;
   
    -o-animation-duration: 0.5s;
    -o-animation-fill-mode: both;
   
    -ms-animation-duration: 0.5s;
    -ms-animation-fill-mode: both;
   
    animation-duration: 0.5s;
    animation-fill-mode: both;
}

---這種css ，安卓系統低版本支持的並不理想，換了一種寫法會好一點，但是還是最後還是會突然閃一下。

#userxuzhi{
    position: absolute;
    word-wrap: break-word;
    word-break: break-all;
    top: 0;
    width: 80%;       
    padding: 0.1em 0.1em 0.2em 0.1em;
    margin: 0 4em;
    rgb(247, 247, 247);
    border: 1px solid rgba(147, 184, 189,0.8);
    -webkit-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),    0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
       -moz-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),    0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
            box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),    0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    -webkit-box-shadow: 5px;
    -moz-border-radius: 5px;
         border-radius: 5px;
}



.scaleIn{ z-index: 22;
    -webkit-transition: -webkit-transform .5s ease-out,  .5s ease-out;
    -moz-transition:-moz-transform .5s ease-out,  .5s ease-out;
    -o-transition:-o-transform .5s ease-out,  .5s ease-out;
    transition:transform .5s ease-out,  .5s ease-out;
   
    -webkit-transform:  scale(1);
    -moz-transform:  scale(1);
    -o-transform: scale(1);
    -transform:  scale(1);

}
.scaleOut{
    -webkit-transform:  scale(0);
    -moz-transform:  scale(0);
    -o-transform: scale(0);
    -transform:  scale(0);
   
    -webkit-transition: all,  .1s ease-out;
    -moz-transition:all,  .1s ease-out;
    -o-transition:all,  .1s ease-out;
    transition:all,  .1s ease-out;
   
   

}