关于javascript的运行-PHP中文网问答

各位大神帮我看看这段代码怎么优化下，使他能够不会多个一起运行，就是上一个函数没结束，下次函数要不执行，这是一段网页的侧边菜单。以下是代码：

<!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 p {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>
    <p id = "slide_right" ></p>
    <p 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">
              <p style="">个人中心</p>
            </li></a>
            <a href = "#"><li id = "img3"><img src = "images/qq_slide.png">
              <p style="top:30px;">联系QQ</p>
            </li></a>
            <a href = "#"><li id = "img4"><img src = "images/scanner_slide.png">
                <p style="top:30px;">微信关注</p>
            </li></a>
            <a href = "#"><li id = "img5"><img src = "images/hotLine_slide.png">
                <p style="top:30px;">联系客服</p>
            </li></a>
        </ul>
    </p>

    <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("p").animate({
                       width:"150px",
                       opacity:"1",
                       right:"50px"
                },500)

            },function(){
                $(this).css("background-color","")
                $(this).children("img").attr("src",url);
                $(this).css("color","")
                $(this).children("p").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>

全部回复(1)

阿神2017-04-11 12:04:16 1楼

明白了楼主想要实现的效果，建议你取消用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/进行查阅。

赞 +0

添加回复