JQuery animieren verstecken und zeigen

Question

Ich möchte zwei Dinge auf einmal passieren, wenn ich auf einen Link klicken. Ich gehe langsam durch JQuery Dokumentation, haben aber noch zu lernen, was ich noch brauche.

Hier ist ein Link zu meinem Website

Wenn ich auf die Dienste klicken verknüpfe ich die #slideshow div zu verstecken, und ein neues div um sie ersetzen möchte.

ich versucht hatte, hat nur die Diashow animieren zu den Leistungen Link klicken, aber es wäre an der verknüpften HTML-Seite die belebte Funktion oder gehen Sie entweder zu tun, nicht beide. Wie würde ich erreichen beide.

Es spielt keine Rolle, ob ich gerade auf der gleichen Seite und ausblenden divs, oder wenn ich auf eine neue HTML-Seite zu gehen. Ich möchte nur die belebte Funktion hat und den Inhalt ändern, während man sich versteckt.

Dies ist der jQuery-Code Ich bin mit

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

Haus und Dienstleistungen sind die beiden Links, und ich möchte Dienste wie beim Anklicken des #slideshow div, sich zu verstecken und die slideshow2 div zeigen, die ausgeblendet werden würde und dann die erste ersetzen.

gibt es eine ganze Menge von HTML, so dass es leichter sein kann, meine Quelle von der Verbindung.

anzuzeigen

Answer 1

aktualisiert. Diese Lösung nach einer Follow-up-Frage in den Kommentaren wurde aktualisiert

sollten Sie die Callback-Methode der Ein- / Ausblenden Methoden rel="noreferrer">

$("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. */

});

Die Callback-Methode ist der zweite Parameter der .show / .Hide Funktionen. Es ist läuft, wenn die .show / .Hide Verfahren abgeschlossen ist. Daher können Sie Ihre Feld schließen / öffnen und innerhalb der Callback-Methode ein Ereignis laufen unmittelbar danach.