关于javascript的运行
本文介绍了关于javascript的运行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
各位大神帮我看看这段代码怎么优化下，使他能够不会多个一起运行，就是上一个函数没结束，下次函数要不执行，这是一段网页的侧边菜单。以下是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>slide_right</title>
<script type="text/javascript" src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<style>
* {padding: 0;margin:0;}
#slide_right {width:10px;height:100%;background-color: #444851;position:fixed;top:0;right:0;}
#slide_menu {width:50px;height:250px;background-color: #444851;position:fixed;top:40%;
right:0px;border-radius: 5px;z-index: 99999;
}
#slide_menu ul{margin:0 auto;margin-top: 20px;}
#slide_menu ul a li {list-style-type: none;float:left;margin-bottom: 0px;
width:50px;height:40px;position:relative;z-index: 9999;
}
#slide_menu ul a li div {width:0px;height:100%;margin-top:9px;margin-left:-150px;background-color:#f26e27;
margin-top:-30px;opacity:0;position:absolute;right:50px;z-index:99;color:#ffffff;text-align: center;
line-height: 40px;
}
#slide_menu ul a li img {margin:0 auto;display:block;margin-top: 8px;position:relative;z-index: 999;}
</style>
</head>
<body>
<div id = "slide_right" ></div>
<div id = "slide_menu">
<ul>
<a href = "#"><li id = "img1"><img style = "width:50%" src = "images/logo_slide.png">
</li></a>
<a href = "#"><li id = "img2"><img src = "images/person_slide.png">
<div style="">个人中心</div>
</li></a>
<a href = "#"><li id = "img3"><img src = "images/qq_slide.png">
<div style="top:30px;">联系QQ</div>
</li></a>
<a href = "#"><li id = "img4"><img src = "images/scanner_slide.png">
<div style="top:30px;">微信关注</div>
</li></a>
<a href = "#"><li id = "img5"><img src = "images/hotLine_slide.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").animate({
width:"150px",
opacity:"1",
right:"50px"
},500)
},function(){
$(this).css("background-color","")
$(this).children("img").attr("src",url);
$(this).css("color","")
$(this).children("div").animate({
width:"0px",
opacity:"0",
right:"50px"
},500)
})
}
animated("#img2","images/person_slide.png","images/person_slide2.png");
animated("#img3","images/qq_slide.png","images/qq_slide2.png");
animated("#img3","images/qq_slide.png","images/qq_slide2.png");
animated("#img4","images/scanner_slide.png","images/scanner_slide2.png");
animated("#img5","images/hotLine_slide.png","images/hotLine_slide2.png");
})
</script>
</body></html>
解决方案
明白了楼主想要实现的效果，建议你取消用JQuery，而改用纯CSS3实现效果会更好，主要是用到transition这个属性来做动画，如：
-webkit-transition: all @time ease-in-out;
-moz-transition: all @time ease-in-out;
-ms-transition: all @time ease-in-out;
-o-transition: all @time ease-in-out;
transition: all @time ease-in-out;
@time代表的是你设置的动画时间，以ms为单位。
然后还需要用到:hover这个伪类来设置hover改变的样式属性，具体用法，建议你去http://www.w3school.com.cn/进行查阅。
这篇关于关于javascript的运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
