为什么我写出来的效果会乱跳，求大神帮忙看看，直接复制代码可以运行，图片我放到网上了
以下是代码：
<style>
* {padding: 0;margin:0;}
#slide_right {width:5px;height:100%;background-color: #444851;position:fixed;top:0;right:0;}
#slide_menu {width:40px;height:245px;background-color: #444851;position:fixed;top:40%;
right:0px;border-radius: 5px;z-index: 99999;
}
#slide_menu ul{margin:0 auto;margin-top: 5px;}
#slide_menu ul a li {list-style-type: none;float:left;margin-bottom: 3px;
width:40px;height:45px;position:relative;z-index: 9999;text-align:center;color:#ffffff;font-size:12px;
}
#slide_menu ul a li div {width:0px;height:100%;margin-top:9px;margin-left:-150px;
margin-top:-30px;opacity:0;position:absolute;right:38px;z-index:99;color:#ffffff;text-align: center;border-radius:2px;
line-height: 40px;font-size:20px;
}
#slide_menu ul a li img {margin:0 auto;display:block;margin-top: 5px;position:relative;z-index: 999;}
</style>
<!--///////// 侧边栏/////////-->
<div id = "slide_right" ></div>
<div id = "slide_menu">
<ul>
<a href = "#"><li id = "img1" style = ""><img style = "width:60%,," src = "http://huanledui.cn/images/49/65/01/6e38fec2b5d6f02d29cc422b161146b813c8f4ea.png">
</li></a>
<a href = "#"><li id = "img2"><img src = "http://huanledui.cn/images/d1/f3/19/9954156d7834ebfdfa093edda30eabb9c815fbd2.png">
帐号
<div style="top:30px;">个人中心</div>
</li></a>
<a href = "#"><li id = "img3"><img src = "http://huanledui.cn/images/d4/9b/e5/42a5ba3c12e2212c86a7d5a0b95768052af43999.png">
QQ
<div style="top:30px;">联系QQ</div>
</li></a>
<a href = "#"><li id = "img4"><img src = "http://huanledui.cn/images/5c/28/f9/117ff7f1107ead144dda3d2eff4eac8097c4bb24.png">
二维码
<div style="top:30px;">微信关注</div>
</li></a>
<a href = "#"><li id = "img5"><img src = "http://huanledui.cn/images/fa/a4/99/046c0fdc0510f1d485eebff9b87ebb1d978d7a45.png">
客服
<div style="top:30px;">联系客服</div>
</li></a>
</ul>
</div>
<script>
$(function(){
function animated (idName,url,url2){
$(idName).hover(function(){
$(this).css("background-color","#f26e27")
$(this).css("color","#ffffff")
$(this).children("img").attr("src",url2);
$(this).children("div").css("background-color","#f26e27")
$(this).children("div").animate({
width:"120px",
opacity:"1",
right:"38px"
},300)
},function(){
$(this).css("background-color","#444851")
$(this).children("img").attr("src",url);
$(this).css("color","")
$(this).children("div").css("background-color","#444851")
$(this).children("div").animate({
width:"0px",
opacity:"0",
right:"38px"
},300)
})
}
animated("#img2","http://huanledui.cn/images/d1/f3/19/9954156d7834ebfdfa093edda30eabb9c815fbd2.png","http://huanledui.cn/images/dd/14/93/8ac29fa89952f8375a80d342e95877f8d4682023.png");
animated("#img3","http://huanledui.cn/images/d4/9b/e5/42a5ba3c12e2212c86a7d5a0b95768052af43999.png","http://huanledui.cn/images/fa/b7/54/c6008895b81c835c96dad963195ac5991e1d78d7.png");
animated("#img4","http://huanledui.cn/images/5c/28/f9/117ff7f1107ead144dda3d2eff4eac8097c4bb24.png","http://huanledui.cn/images/6b/d1/c6/1dcf47f524003a6db7b46cb5a04ca9ea300b632e.png");
animated("#img5","http://huanledui.cn/images/fa/a4/99/046c0fdc0510f1d485eebff9b87ebb1d978d7a45.png","http://huanledui.cn/images/83/ed/40/e1124bdf60ff98230f5ccb38bcb826caf173d4c0.png");
})
</script>在调用animate前加个stop调用就行了，记得两个地方都要加：
//code...
$(this).children("div").stop().animate({
width: "120px",
opacity: "1",
right: "38px"
}, 300)
//code...