fadeOut div après problème de l'événement onClick

Question

est mon premier poste de temps ici et ont lu beaucoup de choses utiles au cours des dernières semaines depuis que je trouve le site!

Alors, ma question est la suivante: je le code suivant sur mon site et ce que Im essayant de faire est ...

• Lorsqu'un élément (.btn-leavecomment) est cliqué,

• est révélé un div cachée (#commenttype) via slideDown. Ce div caché contient deux boutons radio.

• clic / sélection de la « première » bouton radio (.reveal_ccform) Je voudrais une autre div caché à être révélé (je travaille tout cela jusqu'à ici)

• Je puis comme le premier caché div (qui contient les boutons radio (#commenttype)) puis disparaître et fadeOut (une fois que l'utilisateur a sélectionné seul le premier bouton radio des deux. Le deuxième bouton radio redirige vers une autre page au cas où vous poseriez la question.)

peut-elle aider quelqu'un à obtenir ce dernier point (à fadeOut la première div cachée) sur un clic du premier bouton radio?

Merci

Mon code:

$(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

Je sens que je dois manquer quelque chose, parce que cela semble assez simple par rapport à ce que vous faites déjà, mais ici vous allez:

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

****** **** EDIT

Pour une animation plus fluide et plus complexe que par la demande dans le commentaire suivant, faire quelque chose comme ceci:

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

Cela va créer une animation personnalisée pour faire disparaître la div contenant les boutons radio tout en réduisant simultanément la hauteur à zéro, ce qui résoudra le problème de saut. La fonction de rappel supprime la div après l'animation est terminée (pas une étape nécessaire, mais conserve les DOM en ligne avec ce que l'utilisateur voit).

Voir le résultat: http://jsfiddle.net/8bCAg/