Jquery animar ocultar y mostrar

Question

Me gustaría tener dos cosas a la vez cuando hago clic en un enlace. Estoy repasando lentamente la documentación de Jquery, pero todavía tengo que aprender lo que necesito.

Aquí hay un enlace a mi site

Cuando hago clic en los servicios de enlace me gustaría que el div #slideshow para ocultar, y un nuevo div para reemplazarlo.

Había intentado que la presentación de diapositivas fuera animada al hacer clic en el enlace de servicios, pero ya sea que hiciera la función animada o vaya a la página html vinculada, no a ambas. ¿Cómo puedo lograr ambos?

No importa si simplemente oculto y muestro divs en la misma página, o si voy a una nueva página html. Solo quiero tener la función animada y cambiar el contenido mientras oculto uno.

El código jQuery estoy 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'); 
    } 
); 
}); 

el hogar y los servicios son los dos enlaces, y me gustaría servicios cuando se hace clic para ocultar el div #slideshow, y mostrar el div slideshow2, lo que sería oculto y luego reemplazar el primero.

hay una buena cantidad de html por lo que puede ser más fácil ver mi fuente desde el enlace.

Answer 1

Actualizado: Esta solución se actualizó después de una pregunta de seguimiento en los comentarios.

Debe utilizar callback method de los métodos 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. */ 

}); 

El método de devolución de llamada es el segundo parámetro de las funciones .show/.hide. Se ejecuta cada vez que se completa el método .show/.hide. Por lo tanto, puede cerrar/abrir su cuadro, y dentro del método de devolución de llamada ejecutar un evento inmediatamente después.