javascript - jquery写侧边悬浮菜单
本文介绍了javascript - jquery写侧边悬浮菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
为什么我写出来的效果会乱跳,求大神帮忙看看,直接复制代码可以运行,图片我放到网上了
以下是代码:
<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...
这篇关于javascript - jquery写侧边悬浮菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文