如何实现点击页面菜单图片替换并且有动画效果

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;
   
   

}