Come eseguire il ciclo .animate JQuery

Question

Sto lavorando con un singolo div con un'immagine all'interno. Ho bisogno dell'animazione per scorrere da destra a sinistra della pagina e poi tornare a destra e continuare in un ciclo. Ho letto molti post qui ma non riesco a far funzionare correttamente lo script.

'$(document).ready(function(){ 
    function loop() { 

     $('#clouds').animate({left: '+=1400',},50000, 'linear', function(){ 
      loop(); 
     }); 

HTML

< div id="clouds">< img border="0" alt="animated clouds" src="/images/clouds.png" />< /div> 

CSS

#clouds { 
    position:absolute; 
    z-index:500; 
    right:0px; 
    top:10px; 
} 

Answer 1

Prova questo:

JSFiddlehttp://jsfiddle.net/2YqH2/

non sei in movimento le nuvole di nuovo verso il lato destro. All'interno della funzione loop, ho aggiunto

$('#clouds').css({right:0}); 

e il ciclo continuerà da lì. Ho anche modificato la tua animazione per animare la proprietà "giusta" poiché hai detto che volevi che le nuvole si spostassero da destra a sinistra.

Inoltre, il tuo javascript non era ben formato. Assicurati di ottenere quelle parentesi graffe e parentesi di chiusura! Ecco il javascript fisso.

$(document).ready(function() { 
    function loop() { 
     $('#clouds').css({right:0}); 
     $('#clouds').animate ({ 
      right: '+=1400', 
     }, 5000, 'linear', function() { 
      loop(); 
     }); 
    } 
    loop(); 
}); 

Answer 2

JavaScript:

$(document).ready(function() { 

    $('#clouds').click(function() { 
loop();  
    }); 

function loop(){ 
    alert('a'); 
     $('#clouds').animate({ 
      opacity: 0.25, 
      left: '+=1400', 
      height: 'toggle' 
     }, 5000, 'linear', function() { 
      loop(); 
     }); 

} 

}); 

HTML:

<div id="clouds"><img border="0" alt="animated clouds" src="../img/image.png" /></div> 

l'errore è che non si chiama mai il ciclo di funzione. guarda come it works, è possibile rimuovere il alert('a') perché è solo una bandiera per sapere che il ciclo ricomincia. ora devi fare il movimento inverso (come resettare il div, per ricominciare il ciclo di movimento).