Jquery 动画移动不起作用

Question

我正在尝试为网页上的汽车图片制作动画。不透明度命令有效但不移动。我已将图像标签放在另一个大 div 中，以允许 space 用于图像标签及其动画。

<div class="blockone">
            <div class="row blockoneComingsoon">
                <h1 id="carmover" class="csoon">Click to see what we do</h1>
            </div>
            <div style="width:75%;margin:auto auto;top:10px" class="row">
                <div style="width:300px;margin:auto auto">
                    <img style="top:10px"id="car" src="/components/pg.blocks/images/car.png" width="300" class="carplace" />
                </div>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    </body>
    <body>
        <div class="container">
</div>
        <script>
            $(document).ready(function(){
                $('#car').animate({opacity: '0.1'});
                
                $('#carmover').click(function(){
               
       $('#car').animate({left:'100px',opacity: '1'});
           
                });
       
   });
  </script>

Answer 1

您可以使用 .addClass()...

.animate{
    left: 100px;
    opacity: 1;
    -webkit-transition: all 1s ease;
 }

 $('#carmover').click(function(){
     $('#car').addClass('animate');
 });

Answer 2

你只需要将position:relative添加到img中，这样

<img style="top:10px;position:relative"id="car" src="/components/pg.blocks/images/car.png" width="300" class="carplace" />

反正你的代码中有一个标签体在那个位置没用

Jquery 动画移动不起作用

Jquery animate move doesnt work

jquery

jquery-animate