Modifier des divs les unes après les autres (toggleclass?)

Bonjour,

voilà ma question :
j'aimerai créer un effet où trois divs (ou plus) allignées de gauche à droite, brillent en alternance les unes après les autres.

Je suis allé voir du côté de .toggle, et malheureusement je crois qu'il me manque un peu de logique en amont, genre une mise en tableau (array) des divs et une boucle for ?

Est-ce que quelqu'un pourrait m'aider là-dessus ?

Thanks,

il faudrait faire un .each() sur chaque élément à faire briller + un setTimeout incrémenté (ajouter X secondes de décalage). Evidemment dans le setTimeout tu mets la fonction permettant de faire briller l'élément en cours.

Hello kenor,

merci pour la réponse, ça m'a bien guidé. J'ai réussi à obtenir l'effet que je voulais avec une incrémentation for. Par contre, plutôt qu'un .each(), je me sers de l'incrémentation pour sélectionner mes divs.

Ci-dessous mon code, avec une question : est-ce que c'est possible de remplacer le for avec un jQuery.each() ?

<script src="js/jquery-1.7.js" type="text/javascript"></script>

<div id="contain">
<div class="blue">One</div>
<div class="blue">Two</div>
<div class="blue">Three</div>
</div>

<style>
.green {color:green;font-weight:bold;}
.blue {color:blue;font-weight:bold;}
</style>

<script>
$(document).ready(function (){

var lonG = $("#contain div").length;
var repeaT = lonG*800+800;

$.Fooloow = function () {
for (i=0; i<=lonG; i++){
var timE = 1000*i;
var timEr = timE+800;
setTimeout ('$("#contain div:nth-child('+i+')").removeClass("blue").addClass("green");',timE);
setTimeout ('$("#contain div:nth-child('+i+')").addClass("blue");',timEr);
}
};

$.Fooloow();
setInterval(function() {
    $.Fooloow();
}, repeaT);
});
</script>

Merci d'avance,

Salut,

C'est possible après petite modification du code.
Mais d'abord quelque point concernant le js

Il faut éviter de passer des chaines de caractères à setTimeout car cela fait un appel à eval, résultat les interpréteur js ne peuvent pas optimiser le code et cela est toujours plus lent que le passage d'une fonction. setTimeout accepte aussi des paramètre supplémentaires (voir la le lien).
Je te renvois vers les closures de js qui pourra t'évitais des erreurs future dans l'utilisation de setTimeout et setInterval.

var $div = $("#contain div");
var lonG = $div.length;
var timE = 0;
$div.each(function(div){
 setTimeout(function(div){
  $(div).removeClass("blue").addClass("green");
 }, timE, div);
 setTimeout(function(div){
  $(div).addClass("blue");
 }, timE + 800, div);
 timE += 1000;
});

Modifié par jo_link_noir (15 Dec 2011 - 19:10)