JQuery s'estompe en même temps que le fondu sort.

Question

Je suis bloqué et je ne comprends vraiment pas jQuery en ce moment !

Je veux que mes 3 blocs s'estompent puis réapparaissent avec un délai de 3 secondes, en boucle.

Cela fonctionne mais je veux que le bloc 1 s'estompe PENDANT que le bloc 2 réapparaît, et pas après.

Et que le bloc 2 s'estompe PENDANT que le bloc 3 réapparaît... et ainsi de suite !

$(".block2").fadeTo("fast", 0.3)
$(".block3").fadeTo("fast", 0.3)

function1();

var timing = 3000;

function function1(){
$(".block1").fadeTo("slow", 1).delay(timing).fadeTo("slow", 0.3, function2);
}

function function2(){
$(".block2").fadeTo("slow", 1).delay(timing).fadeTo("slow", 0.3, function3);
}

function function3(){
$(".block3").fadeTo("slow", 1).delay(timing).fadeTo("slow", 0.3, function1);
}

Merci =)

Answer 1

Il suffit de donner à tous vos blocs une classe commune .block

Démo jsBin

var el = $('.block'),
    F = 800,   // TEMPS DE FONDU
    P = 3000,  // TEMPS DE PAUSE
    S = -1;    // Index de départ de l'élément (passera à 0 après le premier démarrage)

function a(){el.eq(++S%el.length).fadeTo(F,1).siblings(el).stop(1).fadeTo(F,0.3);}
a();

setInterval(a, P);

Answer 2

Vous utilisez des rappels. Les rappels ne se produiront pas tant que le fondu n'est pas terminé. Mais nous pouvons utiliser un délai d'attente pour appeler les deux en même temps.

$(".block2").fadeTo("fast", 0.3)
$(".block3").fadeTo("fast", 0.3)

function1();

var timing = 3000;

function function1(){
    $(".block1").fadeTo("slow", 1, function(){
         setTimeout(function(){
             function2();
         }, timing);
    }).delay(timing).fadeTo("slow", 0.3);

}

Ou style curry :

var function1, function2, function3;

function1 = fadeInnyOuty( $('.block1'), function2);
function2 = fadeInnyOuty( $('.block2'), function3);
function3 = fadeInnyOuty( $('.block3'), function1);

function fadeInnyOuty($elem,func){
    $elem.fadeTo("slow", 1, function(){
         setTimeout(function(){
             func();
             $elem.fadeTo("slow", 0.3);
         });
    });
}

Answer 3

Le problème est que vous déclenchez l'étape suivante en utilisant la fonction de rappel de l'action fadeOut. Ainsi, le prochain fadeIn se produit après que le fadeOut ait été complété. Vous voulez plutôt que le fadeIn se produise après le délai. Vous pouvez utiliser la méthode queue pour y parvenir :

.delay(timing).queue(function() {
  function2();
  $(this).dequeue(); // Garde la file d'attente en cours, elle s'arrête si vous ne faites pas cela
}).fadeOut("lentement", 0.3);

J'ai créé un exemple ici http://jsfiddle.net/e8W5E/ pour le voir en action

---

Éditer En réponse aux commentaires de roXon, vous pouvez écrire la solution de manière plus élégante comme suit. Le HTML est mis à jour pour supprimer le compteur redondant...

Ensuite, le jQuery ressemble à ceci...

$(function() {

  // Ce sont les éléments que nous allons faire pivoter
  var $blocks = $(".block");

  // Configurez les éléments initiaux à une opacité de 0.3
  $blocks.not(":eq(0)").fadeTo("rapide", 0.3);

  // Ceci est notre fonction de répétition
  var go = function($el, i, haut, bas, t) {
    $el.eq(i).fadeTo("lentement", haut)
      .delay(t)
      .queue(function() {

        // L'index suivant est 1 + l'index actuel
        // utilisez le modulo pour revenir au début
        var suivant = (i + 1) % $el.length;
        go($el, suivant, haut, bas, t);
        $(this).dequeue();
       })
       .fadeTo("lentement", bas);
  };

  // Commencez à faire apparaître et disparaître
  go($blocks, 0, 1, 0.3, 1000);

})();

Vous pouvez ajouter autant de blocs que vous le souhaitez avec ce nom de classe et ils seront inclus dans la rotation du fadeIn et du fadeOut. Et fiddle http://jsfiddle.net/e8W5E/1/