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>

來源

2016-06-11 Bineesh

你剛纔添加的位置是：相對於IMG公司以這種方式

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

總之你的代碼中有一個標籤體在那個位置是無用的

來源

2016-06-11 07:44:17

這工作@giuseppe – Bineesh

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

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

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

來源

2016-06-11 07:40:43 ArmKh

Jquery動畫移動不起作用

回答

相關問題