Jquery animate nascondi e mostra

Question

Mi piacerebbe avere due cose in una volta quando clicco su un link. Sto lentamente esaminando la documentazione di Jquery, ma devo ancora imparare ciò di cui ho ancora bisogno.

Ecco un link al mio site

Quando clicco sui servizi di collegamento Vorrei che il div #slideshow per nascondere, e un nuovo div per sostituirlo.

Avevo provato ad animare la presentazione facendo clic sul collegamento dei servizi, ma avrebbe eseguito la funzione di animazione o la pagina html collegata, non entrambe. Come potrei realizzare entrambi.

Non importa se nascondo e mostro i div sulla stessa pagina, o se vado a una nuova pagina html. Voglio solo avere la funzione di animazione e modificare 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'); 
    } 
); 
}); 

casa e servizi sono i due link, e vorrei servizi quando si fa clic per nascondere il div #slideshow, e mostrare il div slideshow2, che sarebbe nascosto e quindi sostituire il primo.

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

Answer 1

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

È necessario utilizzare il metodo callback method per mostrare/nascondere.

$("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 di callback è il secondo parametro delle funzioni .show/.hide. Viene eseguito ogni volta che viene completato il metodo .show/.hide. Pertanto, è possibile chiudere/aprire la propria casella e, nel metodo di callback, eseguire immediatamente un evento.