Jquery animare nascondere e mostrare

Question

Vorrei che accadessero due cose contemporaneamente quando faccio clic su un collegamento. Sto lentamente esaminando la documentazione di Jquery, ma devo ancora imparare di cosa ho bisogno.

Ecco un link al mio sito

Quando faccio clic sul collegamento dei servizi vorrei nascondere #slideshow div e un nuovo div per sostituirlo.

Avevo provato ad animare la presentazione facendo clic sul collegamento dei servizi, ma avrebbe fatto la funzione animata o sarebbe andata alla pagina html collegata, non entrambe. Come realizzerei entrambi.

Non importa se nascondo e mostro i div nella stessa pagina o se vado in una nuova pagina html. Voglio solo avere la funzione animata e cambiare il contenuto nascondendone uno.

questo è il codice jquery che sto usando

$(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 e servizi sono i due link e vorrei fare clic sui servizi per nascondere #slideshow div e mostrare slideshow2 div , che verrebbe nascosto e quindi sostituito il primo.

c'è una buona quantità di html, quindi potrebbe essere più semplice visualizzare la mia fonte dal link.

Answer 1

Aggiornato: questa soluzione è stata aggiornata a seguito di una domanda di follow-up nei commenti.

Dovresti usare il metodo di callback dei metodi 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. */

});

Il metodo callback è il secondo parametro delle funzioni .show / .hide. Viene eseguito ogni volta che il metodo .show / .hide è completato. Pertanto, è possibile chiudere / aprire la casella e, all'interno del metodo di callback, eseguire un evento immediatamente dopo.