Jquery animate move funktioniert nicht

Ich versuche ein Auto Bild auf der Webseite zu animieren. Der Opazitätsbefehl funktioniert, bewegt sich aber nicht. Ich habe das Bild-Tag in ein anderes großes div eingefügt, um Platz für das Bild-Tag und seine Animation zu schaffen.Jquery animate move funktioniert nicht

<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>

Quelle

2016-06-11 Bineesh

haben Sie gerade Position hinzuzufügen: in Bezug auf img, auf diese Weise

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

sowieso gibt es einen Tag-Körper in Ihrem Code, der in dieser Position unbrauchbar ist

Quelle

2016-06-11 07:44:17

das funktionierte @giuseppe – Bineesh

Sie können .addClass verwenden() ...

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

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

Quelle

2016-06-11 07:40:43 ArmKh

Antwort

Verwandte Themen