Fadeout div após o problema do evento OnClick

Question

Esta é a minha primeira vez postar aqui e li muitas coisas úteis nas últimas semanas desde que encontrei o site!

Então, minha pergunta é: eu tenho o seguinte código no meu site e o que estou tentando fazer é ...

• Quando um elemento (.btn-leaveComment) é clicado,

• Uma div (#CommentType) oculta é revelada via slidown. Esta divisão oculta contém dois botões de rádio.

• No clique/seleção do botão de rádio 'primeiro' (.reveal_ccform), gostaria que outro Div escondido fosse revelado (eu tenho tudo isso trabalhando aqui)

• Eu gostaria que o primeiro Div oculto (que contém os botões de rádio (#CommentType)) para que desapareça e FADEOUT (uma vez que o usuário tiver selecionado apenas o primeiro botão de rádio dos dois. O segundo botão de rádio redireciona para outra página no caso de você estava se perguntando.)

Alguém pode ajudar a obter esse último ponto (para desaparecer a primeira div) a clicar no primeiro botão de rádio?

obrigada

Meu 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

Sinto que devo estar perdendo alguma coisa, porque isso parece bastante simples em comparação com o que você já está fazendo, mas aqui está:

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

******EDITAR****

Para uma animação mais suave e mais complexa conforme a solicitação no seguinte comentário, faça algo assim:

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

Isso criará uma animação personalizada para desaparecer a div, contendo os botões de rádio, reduzindo simultaneamente a altura a zero, o que resolverá o problema de salto. A função de retorno de chamada remove a div após a conclusão da animação (não é uma etapa necessária, mas mantém o DOM alinhado com o que o usuário está vendo).

Veja o resultado: http://jsfiddle.net/8bcag/