fadeOut div después del problema del evento onClick

¡Esta es la primera vez que publico aquí y he leído muchas cosas útiles en las últimas semanas desde que encontré el sitio!

Entonces, mi pregunta es: tengo el siguiente código en mi sitio y lo que estoy tratando de hacer es …

  • Cuando se hace clic en un elemento (.btn-leavecomment),

  • un div oculto (#commenttype) se revela a través de slideDown. Este div oculto contiene dos botones de radio.

  • Al hacer clic / seleccionar el ‘primer’ botón de opción (.reveal_ccform) me gustaría que se revelara otro div oculto (tengo todo esto trabajando hasta aquí)

  • Luego me gustaría que el primer div oculto (que contiene los botones de radio (#commenttype)) desaparezca y desaparezca (una vez que el usuario haya seleccionado solo el primer botón de radio de los dos. El segundo botón de radio redirige a otra página en caso de que te estabas preguntando)

¿Alguien puede ayudar a obtener ese último punto (para eliminar el primer div oculto) al hacer clic en el primer botón de radio?

Gracias

Mi código:

$(document).ready(function(){ // Click first element (.btn-leavecomment) // and reveal first hidden DIV (#commenttype) $(".btn-leavecomment").toggle(function(){ $("#commenttype").stop().animate({ down: "+=300" }, 3000) $("#commenttype").stop().slideDown("slow"); }, function(){ $("#commenttype").stop().animate({ down: "-=300" }, 1400) $("#commenttype").stop().slideUp("slow"); }); // on click of first radio (.reveal_ccform) // Reveal second hidden DIV (ccform_container) $(".reveal_ccform").toggle(function(){ $("#ccform_container").stop().animate({ down: "+=600" }, 6000) $("#ccform_container").stop().slideDown("slow"); //fadeOut #commenttype onClick of .reveal_ccform after #ccform_container slidesDown }); 

Siento que debo estar perdiendo algo, porque esto parece bastante simple en comparación con lo que ya estás haciendo, pero aquí tienes:

 $('.reveal_ccform').click(function() { $('#commenttype').fadeOut(); }); 

******EDITAR****

Para una animación más suave y compleja según la solicitud en el siguiente comentario, haga algo como esto:

 $('.reveal_ccform').click(function() { $('#commenttype').animate({height: 0, opacity: 0}, function() { $(this).remove(); }); }); 

Esto creará una animación personalizada para desvanecer el div que contiene los botones de radio y al mismo tiempo reducir la altura a cero, lo que resolverá el problema del salto. La función de callback elimina el div una vez que se completa la animación (no es un paso necesario, pero mantiene el DOM en línea con lo que el usuario está viendo).

Vea el resultado: http://jsfiddle.net/8bCAg/