Jquery anima a esconder y mostrar

Question

Me gustaría que ocurrieran dos cosas a la vez cuando hago clic en un enlace. Lentamente estoy revisando la documentación de Jquery, pero todavía tengo que aprender lo que necesito todavía.

Aquí hay un enlace a mi sitio

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

Intenté animar la presentación de diapositivas al hacer clic en el enlace de servicios, pero haría la función de animación o iría a la página html vinculada, no ambas. ¿Cómo lograría ambas cosas?

No importa si solo 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 una.

este es el código jquery que 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');
    }
  );
});

inicio y servicios son los dos enlaces, y me gustaría recibir servicios al hacer clic para ocultar el #slideshow div y mostrar el slideshow2 div , que estaría oculto y luego reemplazaría al 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 usar el método de devolución de llamada 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 casilla y, dentro del método de devolución de llamada, ejecutar un evento inmediatamente después.