2010-02-09 4 views
1

Tout ce dont j'ai besoin c'est d'exécuter la fonction animateAds encore et encore. Quelqu'un peut-il aider? Ceci est mon code:J'essaye de faire une boucle avec jQuery

function animateAds(n) { 
    $('#ad_1').fadeIn('slow', function(){ 
     $('#ad_1').delay(100).fadeOut('fast', function(){ 
      $('#ad_2').fadeIn('slow'); 
     }); 
    }); 
}; 

$(document).ready(function() { 
    for (n = 0; n < 10; n++) { 
    animateAds(n); 
    } 
});  
+0

Avez-vous un problème? Avec quoi as tu besoin d'aide? –

+0

Quelle est l'erreur que vous obtenez? –

+0

http://stackoverflow.com/questions/170180/looping-over-elements-in-jquery –

Répondre

1

Votre code affiche une limite de 10, mais votre question ressemble un peu à ce que vous voulez qu'elle soit perpétuelle.

Voici un exemple de fonctionnement perpétuel. Si vous voulez la limite, il s'agira d'une simple modification de l'instruction if() dans le rappel.

$('document').ready(function() {  
    var elements = ['#ad_1','#ad_2']; 
    var i = 0; 
    var limit = elements.length; 
    function rotateAds() { 
     $(elements[i]).fadeIn(400); 
     $(elements[i]).delay(1000).fadeOut(200,function(){ 
                i++; 
                if(i == limit) i = 0; 
                rotateAds(); 
               }) 
    } 
    rotateAds(); 
}); 

Est-ce que cela semble proche de ce que vous cherchiez?

Vous pouvez ajouter autant d'éléments que vous le souhaitez, car il compte simplement la longueur du tableau.

1
setInterval(function(){animateAds()}, 100); 

Ce appelleraient votre fonction 10 fois par seconde (100 ms chacun). J'ai effacé le paramètre n car il n'est pas utilisé dans votre code.

Cordialement.

0

peut-être vous devez ajouter un « var » à la boucle, à moins que n est déclarée ailleurs

 
for(var n = 0 ; .... 
+0

JS n'aurait pas de problème avec pas de 'var', cela ferait juste un' n' global. – JAL

2
<!doctype html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script> 
var i=0; 
function animateAds() { 
    if(i==9){return;} 
    $('#ad_2').fadeOut('fast',function(){ 
     $('#ad_1').fadeIn('slow', function(){ 
     $('#ad_1').delay(100).fadeOut('fast', function(){ 
      $('#ad_2').fadeIn('slow', function(){i++;animateAds();}); 
     }); 
     }); 
    }); 
}; 
$(document).ready(function() { 
    animateAds(); 
    }); 
</script> 
</head> 
<body> 


<img id='ad_1' style='display:none' src='http://sstatic.net/so/img/logo.png'> 
<br> 

<img id='ad_2' src='http://sstatic.net/so/img/logo.png'> 

Je ne sais pas si cet idéal, mais il fonctionne comme une page autonome . Est-ce ce que vous essayez de faire?

+0

C'est parfait. Je vous remercie. –

Questions connexes