Comment puis-je faire de l'animation jQuery comme ça?

Question

Je veux faire des nuages ​​comme ça page

il devrait afficher dans des endroits aléatoires en-tête et par la méthode aléatoire mouvement qui je peux. Je fonction settimeout, mais il ne fonctionne pas bien

Answer 1

Utilisez setInterval (désolé, je me suis trompé en supposant retard() pourrait aider)

Essayez quelque chose comme ça (example here). En supposant que votre nuage est un div:

function moveMe(){ 
    var $this = $('#cloud'); 
    $this.each(function(){ 
      var ranX=Math.floor(Math.random()*11); 
      var startX = $this.offset().left; 
      var maxX = $this.parent().width(); 
      var newX = startX+ranX; 

      //newX = (newX>maxX)? 0: newX; 
      //alert("newX="+newX); 
      $this.animate({ 
       left: newX+'px' 

      }, "slow"); 
    }); 
} 
$(function(){ 



    setInterval('moveMe()',1000); 
}); 

Notez que le balisage hte doit contenir:

<div id="sky"> 
<div class="cloud" id="cloud"></div> 
</div> 

Le CSS:

#sky{ 
width:990px; 
height:300px; 
background:blue; 
position:relative; /* important */ 
} 

.cloud{ 
position:absolute; /* important */ 
top:40px; 
left: 0; 
width:100px; 
height:80px; 
background: transparent url(images/cloud.png) top left no-repeat; 
} 

Answer 2

Les nuages ​​semblent être draggable dans leur récipient. Lorsque vous passez la souris, un autre élément est animé et les nuages ​​eux-mêmes glissent côte à côte dans leur conteneur parent lorsque vous passez le curseur sur le parent.

1. jQuery's draggable plugin.
2. $.hover(); pour la pluie animée.
3. $.animate(); pour le glissement.

Montrez-nous ce que vous avez essayé et vous obtiendrez une réponse plus détaillée.

Answer 3

Je ne sais pas comment dans jQuery, mais dans un simple JS, c'est une image qui se déplace avec un minuteur. Sur Firefox et en utilisant FireBug vous pouvez voir le code dans les nuages ​​