hide animado Jquery e mostrar
-
06-07-2019 - |
Pergunta
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.
Solução
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.