Mostrando un div invisible después animado jQuery

Question

Así que estoy tratando de encontrar la manera de mostrar un div invisible después de una animación en jQuery. Aquí está el código para mostrar el div:

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

el css que también hace que el 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;
}

y la animación de 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');
 });

});

¿cómo puedo hacer que sea que el div box_green muestra después de la animación #menu_h se hace? vamos a decir que también tengo un div oculto #box_yellow, ¿cómo puedo hacerlo visible (con el mismo efecto que el div box_green) luego de reducir el box_green de nuevo (dejando que sea invisible de nuevo). De hecho, tengo 5 divs (box_green y box_yellow 2 de ellos) que necesita tener que "a su vez está representada actualmente div fuera y mostrar div clic" del evento.

Answer 1

Usted tendrá que aplicar callback.

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

  

Un ejemplo del uso de una devolución de llamada   función. El primer argumento es una   gama de propiedades de CSS, el segundo   especifica que la animación debe   tomar 1000 milisegundos para completar,   los terceros estados del tipo de flexibilización, y   el cuarto argumento es un anónimo   función de devolución de llamada.

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

Reemplazar function(){alert("all done");} con su propia función a algo hecho aparecer, desaparecer, nada ...: P

Answer 2

También puede utilizar las funciones show y hide, en lugar de jugar con el CSS del elemento, o incluso si toggle mostrar / ocultar el mismo elemento.