Jquery animer cacher et montrer

Question

J'aimerais que deux choses se produisent simultanément lorsque je clique sur un lien. Je consulte lentement la documentation Jquery, mais je n’ai pas encore appris ce dont j’avais besoin.

Voici un lien vers mon site

.

Lorsque je clique sur le lien des services, j'aimerais que le #slideshow div soit masqué et qu'un nouveau div le remplace.

J'avais essayé de simplement animer le diaporama en cliquant sur le lien des services, mais la fonction animer était utilisée ou la page html liée, pas les deux. Comment pourrais-je accomplir les deux.

Peu importe que je cache et que je montre des divs sur la même page ou que je passe à une nouvelle page html. Je veux juste avoir la fonction animate et changer le contenu tout en en cachant un.

c'est le code jQuery que j'utilise

$(document).ready(function(){   
  $("a.home").toggle(
    function(){
      $("#slideshow").animate({ height: 'hide', opacity: 'hide' }, 'slow');   
    },
    function(){
      $("#slideshow").animate({ height: 'show', opacity: 'show' }, 'slow');   
    }
  );
});

$(document).ready(function(){   
  $("a.services").toggle(
    function(){
      $("#slideshow2").animate({ height: 'show', opacity: 'show' }, 'slow');
    },
    function(){
      $("#slideshow2").animate({ height: 'hide', opacity: 'hide' }, 'slow');
    }
  );
});

home et services sont les deux liens, et je voudrais les services lorsque vous cliquez dessus pour masquer le #slideshow div et afficher le slideshow2 div , qui serait caché puis remplacerait le premier.

il y a une bonne quantité de code HTML, il est donc plus facile de visualiser mes sources à partir du lien.

Answer 1

Mise à jour: cette solution a été mise à jour à la suite d'une question de suivi dans les commentaires.

Vous devez utiliser la méthode de rappel des méthodes show / hide.

$("a").click(function(){

  /* Hide First Div */
  $("#div1").hide("slow", function(){
    /* Replace First Div */
    $(this).replaceWith("<div>New Div!</div>");
  });

  /* Hide Second Div */
  $("#div2").hide("slow", function(){
    /* Replace Second Div */
    $(this).replaceWith("<div>New Div!</div>");
  });

  /* If you wanted to sequence these events, and only
     hide/replace the second once the first has finished,
     you would take the second hide/replace code-block 
     and run it within the callback method of the first
     hide/replace codeblock. */

});

La méthode de rappel est le deuxième paramètre des fonctions .show / .hide. Il est exécuté chaque fois que la méthode .show / .hide est terminée. Par conséquent, vous pouvez fermer / ouvrir votre boîte et dans la méthode de rappel, exécuter un événement immédiatement après.