问答详情
源自：-

效果能不能再优化一些

最后效果是飞来飞去的，能添加一个判断行为、清除行为事件吗

提问者：不是江南 2016-06-10 12:23

个回答

  • qq_啊啦嘞_0
    2017-06-17 12:32:29

    1）将鼠标hover，改成click事件。

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>抢车位动画效果制作</title>
       <script src="jquery-1.11.1.js"></script>
       <style>
           .car-box {
               position: relative;
               width:720px;
               height:701px;
           }
           /*.carport{*/
               /*width:720px;*/
               /*height:701px;*/
               /*display: inline-block;*/
               /*z-index:2;*/
           /*}*/
    .car{
               position: absolute;
               top:0;
               left:720px;
           }
       </style>
    </head>
    <body>
    <div class="car-box">
       <img class='car' src="car.png"/>
       <img class="carport" src="carport.png"/>

    </div>
    <script>
       $(document).ready(function(){
           $(".car").click(function() {
               var left = $(this).css('left');
               if (left == '720px') {
                   $(".car").animate({left: 0}, {duration: 300})
               }else{
                   $(".car").animate({left:"720px"}, {duration: 300})
               }
           }
       )
       })
    </script>
    </body>
    </html>

    0