hide animado Jquery e mostrar

Question

Eu gostaria de ter duas coisas acontecem de uma só vez, quando eu clicar em um link. Estou indo lentamente através de documentação do jQuery, mas ainda tem que aprender o que eu preciso ainda.

Aqui está um link para o meu local

Quando clico no link serviços gostaria que o #slideshow div a esconder, e uma nova div para substituí-lo.

Eu tinha tentado apenas para ter o animado slideshow para fora em clicando nos serviços de ligação, mas seria quer fazer a função animado ou ir para a página html ligada, não ambos. Como eu iria realizar ambos.

Não importa se eu apenas ocultar e mostrar divs na mesma página, ou se eu ir para uma nova página html. Eu só quero ter a função animados e alterar o conteúdo, enquanto um esconderijo.

este é o código jquery Eu estou 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 serviços são os dois links, e eu gostaria serviços quando clicado para esconder a #slideshow div, e mostrar o slideshow2 div, que seria escondido e, em seguida, substituir o primeiro.

há uma boa quantidade de html por isso pode ser mais fácil de ver a minha fonte do link.

Answer 1

Atualizado:. Esta solução foi actualizada após uma pergunta de acompanhamento nos comentários

Você deve usar a callback método dos mostrar / ocultar métodos.

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

});

O método de retorno é o segundo parâmetro das funções .mostrar / .hide. É correu sempre que o método .mostrar / .hide está concluída. Portanto, você pode fechar / abrir sua caixa, e dentro do método de retorno executar um evento imediatamente depois.