séquence de fading jquery

Question

Je tente de fondre dans un ensemble de divs, l'un après l'autre. Je pensais que je pourrais utiliser le simple pour chaque fonction que jquery offre. Mon code est le suivant:

$('#menu_activate').click(function(){ 
    $('div.section').each(function(i){ 
    $(this).fadeToggle();  
    }); 
}); 

La bonne chose à ce sujet est qu'il n'itérer à travers le divs et ils ont tous fondu lorsque je clique sur le bouton Activer. Le problème est qu'il n'y a PAS DE RETARD entre les éléments qui s'affichent.

Des idées? J'ai essayé la fonction de délai d'attente sans résultat ...

En outre, fadeToggle est une fonction jquery personnalisée qui fonctionne comme on peut s'y attendre.

Merci d'avance. À M.

Answer 1

Réponse finale!

var myTimeout = 0; 
    var myIncrement = 300; // Wait 300ms between each div 
    $('#menu_activate').click(function(){ 
    $('div.section').each(function(i){ 
     setTimeout(function() { $('#section_'+i).show(); },myTimeout); 
     myTimeout += myIncrement;  
    }); 
    }); 

Il était l'augmentation que je ne pensais pas quand je l'ai fait ... et avec la réponse d'Adam, il ne faisait pas référence aux DIV avec « ce » donc je devais leur donner chaque ID de et itérer sur cela à la place. Si proche d'Adam. Très impressionnant et merci d'être si utile!

Answer 2

$('#menu_activate').click(function(){ 
    $('div.section').each(function(i){ 
     $(this).queue(function() { 
      $(this).fadeToggle(); 
      $(this).dequeue(); 
     }); 
    }); 
}); 

Answer 3

Vous voulez probablement le setTimeout, et que vous voulez le délai d'attente pour incrémenter avec chaque div. Le problème ici est que les fadeToggle sont tous appelés les uns après les autres, sans délai. Par conséquent, vous devez introduire un délai vous-même. Il y a deux façons dont vous pouvez faire cela, en voici une:

var myTimeout = 0; 
var myIncrement = 300; // Wait 300ms between each div 
$('#menu_activate').click(function(){ 
    $('div.section').each(function(i){ 
    setTimeout(function() { $(this).fadeToggle() },myTimeout); 
    myTimeout += myIncrement;  
    }); 
}); 

Fondamentalement, les fadeToggle mis s à se produire après un délai d'attente qui incrémente à chaque div.