jQuery fade/reveal delay menu

Question

J'ai 3 btns qui sont de simples étiquettes d'ancrage dans une liste non ordonnée, chacune ayant un identifiant respectif de t1, t2 et t3. J'ai aussi 3 btns similaires qui sont cachés avec css ils ont des identifiants respectifs de t1-discover, t2-discover et t3-discover. Ce que je veux atteindre, c'est quand, par exemple, t1 est cliqué après 5 secondes, il fadeIn t1-discover et fadesOut t2-discover et t3discover, même pour t2 & t3. Voici ma tentative avec jQuery:

$("#t1").click(function() { 
      $("#t2-discover").stop().fadeOut(10); 
      $("#t3-discover").stop().fadeOut(10); 

      // delay fadein of link 
      setTimeout(function() { 
       $('#t1-discover').fadeIn(2000); 
      }, 5000); 

     }); 

     $("#t2").click(function() { 
      $("#t1-discover").stop().fadeOut(10); 
      $("#t3-discover").stop().fadeOut(10); 

      // delay fadein of link 
      setTimeout(function() { 
       $('#t2-discover').fadeIn(2000); 
      }, 5000); 

     }); 

     $("#t3").click(function() { 
      $("#t1-discover").stop().fadeOut(10); 
      $("#t2-discover").stop().fadeOut(10); 

      // delay fadein of link 
      setTimeout(function() { 
       $('#t3-discover').fadeIn(2000); 
      }, 5000);   
     }); 

Cela fonctionne un peu, le retard et les fades sont là, mais quand on BTN est cliqué, il ne supprime pas les 2 autres animations, ils se fanent dans mais y rester est-il un moyen dire FadeIn mais aussi annuler et réinitialiser les 2 autres animations? Je voudrais aussi apprendre à le faire plus efficacement Je suis sûr que ce code est très amaterish mais j'apprends encore! J'espère que cela a du sens et merci d'avance.

Answer 1

Le problème est que l'animation des autres objets n'a pas encore commencé, car il est appelé dans le délai d'attente ..

Vous devez effacer d'abord les délais d'attente existants ..

En outre, depuis votre code est identique pour chaque élément que vous devez généraliser appuyé et seulement écrire une fois ..

je mettrais un id au <ul> ou <ol> que vous utilisez comme

<ul id="#t-list"> 

et dans l'écriture jQuery ..

var clear; // this hold the timeoutObject 
// the following selector will find all links 
// that are children to the #t-list element 
$("#t-list a").click(
    function() { 
      // the following will fadeOut all elements whose id 
      // ends in -discover so that it works with an arbitrary number of them.. 
      // the $= in the selector means ends with 
      $("[id$='-discover']").stop().fadeOut(10); 


      var $thisid = this.id; // get the id of the current element so we can use it in the timeout 
      // delay fadein of link 
      // assign the timeout to a variable so we can clear it 
      // later on 
      clearTimeout(clear); //here we remove current timeouts that have not executed yet.. 
      clear = setTimeout(function() { 
            // use the this keyword instead of the actual id 
            // to generalize it. it means use the current item 
            $("[id='"+$thisid+"-discover']").fadeIn(2000); 
            }, 
         5000); 
      } 
); 

Answer 2

Avez-vous essayé d'utiliser .stop(true,true) pour supprimer les animations en file d'attente et compléter l'animation en cours immédiatement? Vous pouvez également combiner les sélecteurs pour réduire le code.

$("#t1").click(function() { 
    $("#t2-discover,#t2-discover").stop(true,true).fadeOut(10); 

    // delay fadein of link 
    setTimeout(function() { 
     $('#t1-discover').fadeIn(2000); 
    }, 5000); 

}); 

Answer 3

C'est ce que jQuery a été fait pour les files d'attentes :) Vous pouvez utiliser .delay() et .dequeue() par élément. Cela va s'estomper les autres instantanément, Fader sélectionné en arrière en 5 secondes, et d'annuler toutes les animations restantes

$("#t1").click(function() { 
    $("#t2-discover, #t3-discover").dequeue().stop().fadeOut(10); 
    $('#t1-discover').delay(5000).fadeIn(2000); 
}); 

$("#t2").click(function() { 
    $("#t1-discover, #t3-discover").dequeue().stop().fadeOut(10); 
    $('#t2-discover').delay(5000).fadeIn(2000); 
}); 

$("#t3").click(function() { 
    $("#t1-discover, #t2-discover").dequeue().stop().fadeOut(10); 
    $('#t3-discover').delay(5000).fadeIn(2000); 
}); 

Remarque cela nécessite jQuery 1.4 + .... mais si vous êtes juste de commencer, nous espérons que ce ISN 't un problème.