Jquery animer cacher et montrer
-
06-07-2019 - |
Question
J'aimerais que deux choses se produisent simultanément lorsque je clique sur un lien. Je consulte lentement la documentation Jquery, mais je n’ai pas encore appris ce dont j’avais besoin.
Voici un lien vers mon site
. Lorsque je clique sur le lien des services, j'aimerais que le #slideshow
div
soit masqué et qu'un nouveau div le remplace.
J'avais essayé de simplement animer le diaporama en cliquant sur le lien des services, mais la fonction animer était utilisée ou la page html liée, pas les deux. Comment pourrais-je accomplir les deux.
Peu importe que je cache et que je montre des divs sur la même page ou que je passe à une nouvelle page html. Je veux juste avoir la fonction animate et changer le contenu tout en en cachant un.
c'est le code jQuery que j'utilise
$(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');
}
);
});
home et services sont les deux liens, et je voudrais les services lorsque vous cliquez dessus pour masquer le #slideshow
div
et afficher le slideshow2
div
, qui serait caché puis remplacerait le premier.
il y a une bonne quantité de code HTML, il est donc plus facile de visualiser mes sources à partir du lien.
La solution
Mise à jour: cette solution a été mise à jour à la suite d'une question de suivi dans les commentaires.
Vous devez utiliser la méthode de rappel des méthodes 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. */
});
La méthode de rappel est le deuxième paramètre des fonctions .show / .hide. Il est exécuté chaque fois que la méthode .show / .hide est terminée. Par conséquent, vous pouvez fermer / ouvrir votre boîte et dans la méthode de rappel, exécuter un événement immédiatement après.