div fadeOut tras problema evento de clic

Question

Este es mi primer destino en el tiempo aquí y he leído un montón de cosas útiles en los últimos semanas desde que encontré el sitio!

Por lo tanto, 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. Esta div oculto contiene dos botones de radio.

• Al hacer clic / selección del botón 'primero' de radio (.reveal_ccform) Me gustaría recibir otra div oculto a ser revelado (tengo todo esto trabajando hasta aquí)

• Me gustaría entonces como la primera div ocultas (que contiene los botones de radio (#commenttype)) a desaparecer entonces y fadeOut (una vez que el usuario ha seleccionado sólo el primer botón de opción de los dos. El segundo botón redirige a otra página en caso de que se lo pregunte.)

¿Alguien puede ayudar a conseguir este último punto (a fadeOut la primera div oculto) al hacer clic con el primer botón de?

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


}); 

Answer 1

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

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

EDITAR ****** ****

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

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

Esto creará una animación personalizada a desaparecer el div que contiene los botones de radio al mismo tiempo reducir la altura a cero, lo que va a resolver el problema de salto. La función de devolución de llamada elimina la div después de la animación es completa (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/