animation mouvement continu avec jquery

Question

continuous movement

Je voudrais recréer les moments de camion dans le site ci-dessus, il est fait en Mootools. Comment est-ce que je coderais ceci, est-ce qu'il y a un plugin de jQuery pour faire ceci?

Donc, animez un objet du début à la fin de l'écran puis recommencez. Comment puis-je faire jQuery

Toute aide sera e apprécié

Answer 1

Voici un échantillon jsFiddle http://www.jsfiddle.net/XpAjZ/

Plus sur Animer jQuery: http://api.jquery.com/animate/

démonstration de 2 boîtes animées à l'écran à des vitesses différentes, etc. (Voir violon)

pertinen t jQuery code:

var animateMe = function(targetElement, speed){ 

    $(targetElement).css({left:'-200px'}); 
    $(targetElement).animate(
     { 
     'left': $(document).width() + 200 
     }, 
     { 
     duration: speed, 
     complete: function(){ 
      animateMe(this, speed); 
      } 
     } 
    ); 

}; 
animateMe($('#object1'), 5000); 
animateMe($('#object2'), 3000); 

Answer 2

Si vous avez un div avec une image à l'intérieur, comme ceci:

<div style="width: 1000px"> 
<img src="truck.png" id="truck" style="margin-left: -100px" /> 
</div> 

Voici un exemple jQuery pour faire glisser l'image sur la div/écran:

function moveTruck(){ 
    $('#truck').animate(
     {'margin-left': '1000px'}, 
     3000, // Animation-duration 
     function(){ 
      $('#truck').css('margin-left','-100px'); 
      moveTruck(); 
     }); 
    } 

moveTruck(); 

espoir qui fonctionne ...

Answer 3

Here's an example of the following code.

Ceci est relativement simple avec jQuery en utilisant la propriété position:absolute CSS et le rappel de la méthode .animation()^[DOCS]. Vous sera essentiellement animez la propriété left CSS sur une période de temps dans une fonction appelée, puis appelez cette fonction dans le rappel d'animation lorsque l'animation est terminée, comme ceci:

var animateTruck = function() { 

    $('#truck').css('left','-50px') 
       .animate({'left':$(window).width()}, 
         4000, 
         'linear', 
         function(){ 
          animateTruck(); 
         }); 
}; 

animateTruck(); 

Answer 4

Comment va-et-vient à travers la largeur de l'écran la zone de contenu que vous pourriez faire, mais ont déplacer lentement (pas passer par l'écran et à partir de retour de l'autre côté)?