Jquery动画移动不起作用

问题描述：

我试图在网页上动画汽车图像。不透明度命令工作但不移动。我已经把图像标签放在另一个大的div中，以允许图像标签和它的动画的空间。Jquery动画移动不起作用

<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(){ 
 
       
 
    \t \t \t $('#car').animate({left:'100px',opacity: '1'}); 
 
     \t \t \t 
 
       }); 
 
    \t \t \t 
 
\t \t \t }); 
 
\t \t </script>

答

你刚才添加的位置是：相对于IMG公司以这种方式

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

总之你的代码中有一个标签体在那个位置是无用的

这工作@giuseppe – Bineesh

答

您可以使用.addClass（）...

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

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

Jquery动画移动不起作用

相关推荐