web-dev-qa-db-fra.com

Comment boucler .animate JQuery

Je travaille avec une seule div avec une image à l'intérieur. J'ai besoin que l'animation défile de droite à gauche de la page, puis revienne à droite et continue en boucle. J'ai parcouru de nombreux articles, mais je ne parviens pas à faire fonctionner le script correctement.

'$(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;
}
jqueryanimation
7
ac12

Essaye ça:

JSFiddle http://jsfiddle.net/2YqH2/

Vous ne déplacez pas les nuages ​​vers la droite. Dans la fonction de boucle, j'ai ajouté

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

et la boucle continuera à partir de là. J'ai également modifié votre animation pour animer la propriété "droite" puisque vous avez dit que vous souhaitiez que les nuages ​​se déplacent de droite à gauche.

De plus, votre javascript n'était pas bien formé. Assurez-vous de bien avoir ces accolades et parenthèses fermantes! Voici le javascript corrigé.

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

Juste pour ajouter des informations à d’autres, si vous n’utilisez pas animate(), vous devez utiliser un setTimeout() pour éviter l’erreurUncaught RangeError: Maximum call stack size exceeded

Exemple ( Utilisation de jQuery ):

.js 

function looping() {
    $('.loader').fadeOut(1000);
    $('.loader').fadeIn(1000);
    setTimeout(function(){
        looping();
    }, 10);
}

.html 

<div class='loader'>Loading...</div>
0
João Pedro Raldi

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>

votre erreur est que vous n'appelez jamais la boucle de fonction. regardez comment cela fonctionne, vous pouvez supprimer la alert('a') car il s’agit simplement d’un indicateur pour savoir que le cycle recommence. vous devez maintenant effectuer le mouvement inverse (comme pour réinitialiser le div, pour recommencer le cycle de mouvement).

0
jcho360

Toutes les réponses ci-dessus sont des solutions un peu "bidouillables".

Selon la documentation jQuery pour animate() , le deuxième paramètre est un objet options qui a un paramètre complete; une fonction appelée à la fin de l'animation.

Dans le cas d'OP, cet objet option serait configuré comme suit:

function loop() {
    $('#clouds').css({right:0});
    $('#clouds').animate({
        right: '+=1400',
    }, {
        duration: 5000, 
        easing: 'linear', 
        complete: loop
    });
}
loop();
0
fullStackChris