Jquery animate masquer et afficher des

Je voudrais avoir deux choses se produisent à la fois quand je clique sur un lien. Je suis en train de passer par Jquery documentation, mais qui ont encore à apprendre ce dont j'ai besoin encore.

Voici un lien vers mon site

Quand je clique sur le lien services, je voudrais que les #slideshow div à cacher, et une nouvelle div pour le remplacer.

J'avais essayé d'avoir le diaporama animer sur en cliquant sur le lien services, mais il s'agirait soit de faire la fonction animate ou aller à la page html, pas les deux. Comment pourrais-je accomplir à la fois.

Il n'a pas d'importance si je viens de le masquer et afficher des divs sur la même page, ou si je vais à une nouvelle page html. Je veux juste avoir de la fonction animate et modifier le contenu, tout en cachant un.

c'est le jquery je suis en utilisant

$(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');
    }
  );
});

d'accueil et de services sont les deux liens, et je voudrais les services quand on clique dessus pour cacher les #slideshow div, et de montrer la slideshow2 div, ce qui serait caché et ensuite remplacer le premier.

il y a une bonne quantité de html, de sorte qu'il peut être plus facile de voir ma source à partir du lien.

OriginalL'auteur Cool Guy Yo | 2009-06-21

  1. 11

    Mise à jour: Cette solution a été mise à jour suite à une question de suivi dans les commentaires.

    Vous devez utiliser le méthode de rappel de l'afficher/masquer les méthodes.

    $("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 de la .afficher/.masquer les fonctions. Il est exécuté à chaque fois que l' .afficher/.masquer la méthode est terminée. Par conséquent, vous pouvez ouvrir/fermer votre boîte, et à l'intérieur de la méthode de rappel le déroulement d'un événement immédiatement après.

    De grands, qui ont travaillé. Merci! Juste une petite question, comment pourrais-je aller sur se cachent deux divs, et de les remplacer par deux divs en un seul clic. Techniquement je le faire fonctionner, mais il remplace à la fois les divs avec la même chose, de sorte qu'il se répète. J'ai mis à jour mon site avec le problème actuel. Pourriez-vous m'expliquer pourquoi, votre code ne fonctionnent pas sans le code précédent, j'ai été en utilisant ci-dessous.
    La solution a été mis à jour pour montrer comment vous pouvez masquer les deux divs, et de remplacer à la fois avec les différentes divisions.
    Oui, maintenant je me souviens de tout cela a été couvert dans les tutoriels dans le jquery documentation, mais je n'ai jamais saisir les choses jusqu'à ce que vraiment besoin de l'utiliser. Est-il un moyen d'animer la .cacher comme slideup au lieu de cela du tout dans le coin en haut à gauche
    Il suffit de changer "masquer" pour "slideUp" - si vous cochez les deux effets dans la documentation, vous verrez qu'ils ont exactement la même empreinte: méthode(vitesse, [rappel]); Signification, tout ce que vous avez à faire pour changer de peau pour le slideup, est de changer le nom de la méthode 🙂 c'est ça.
    Votre impressionnant! Deux dernières questions, merci beaucoup. Est-il un moyen d'animer le remplaceavec et je suis en utilisant un javascript police remplacer, wiki.github.com/sorccu/cufon/about est-il possible d'obtenir de l'appliquer à des divs que je le remplacer, puisqu'elles se produisent après l'exécution .

    OriginalL'auteur Sampson