Afficher un div invisible après jquery Animer

Question

J'essaie donc de comprendre comment afficher un div invisible après une animation sur jquery. Voici le code pour montrer la div:

$('#box_green')
    .css({
        visibility: "visible",
        opacity: 0
    })
    .fadeIn('slow')
;

le css qui fait aussi la div invisible:

div#box_green{
    background-image:url(../images/bg_stripe_green.png);
    background-repeat:repeat;
    width: 478px;
    height:300px;
    position:absolute;
    top:249px;
    z-index:20;
    visibility:hidden;
}

et l'animation clic:

  $(document).ready(function(){

$("#menu_h, #menu_p, #menu_q, #menu_b, #menu_c").one('click', function(){
    $("#menu_h").animate({"left": "+=419px"}, "slow");
    $("#menu_p").animate({"left": "+=313px"}, "slow");
    $("#menu_q").animate({"left": "+=210px"}, "slow");
    $("#menu_b").animate({"left": "+=104px"}, "slow");
    $("#menu_c").animate({"left": "+=0px"}, "slow");
    $("#menu_h, #menu_p, #menu_q, #menu_b, #menu_c").unbind('click');
 });

});

comment puis-je faire que la div box_green montre après l'animation de #menu_h est fait? et permet de dire que j'ai aussi un #box_yellow caché div, comment puis-je le rendre visible (avec le même effet que le box_green div) après la sortie en fondu la box_green à nouveau (laisser être à nouveau invisible). J'ai fait 5 divs (box_green et box_yellow sont deux d'entre eux) qui ont besoin d'avoir ce « tour affiché div off et show div clicked » événement.

Answer 1

Vous devrez implémenter callback.

De http://docs.jquery.com/Effects/animate#examples

  

Un exemple d'utilisation d'une fonction de rappel   une fonction. Le premier argument est un   éventail de propriétés CSS, le deuxième   précise que l'animation doit   prendre 1000 millisecondes pour terminer,   les troisièmes états du type d'assouplissement, et   le quatrième argument est un anonyme   la fonction de rappel.

$("p").animate({
       height:200, width:400, opacity: .5
    }, 1000, "linear", function(){alert("all done");} );

Remplacez function(){alert("all done");} avec votre propre fonction à quelque chose fait apparaître, disparaître, quoi que ce soit ...: P

Answer 2

Vous pouvez également utiliser les fonctions et show hide, plutôt que de jouer avec le CSS de l'élément, ou même si vous toggle afficher / cacher le même élément.