fadeOut div nach onClick Ereignis Problem

Question

Dies ist mein erstes Mal hier Posting auf und hat eine Menge hilfreicher Dinge in den letzten paar Wochen lesen, da ich die Seite gefunden!

Also, meine Frage ist: Ich habe den folgenden Code auf meiner Website und was im Versuch zu tun ...

• Wenn ein Element (.btn-leavecomment) angeklickt wird,

• eine versteckte div (#commenttype) über slidedown enthüllt. Dieser versteckte div enthält zwei Radio-Buttons.

• Ein Klick / Auswahl des 'ersten' Radio-Button (.reveal_ccform) Ich würde eine weitere versteckte div wie offenbart werden (ich habe das alles hier Aufarbeitungs)

• Ich würde dann wie die ersten versteckte div (die den Radio-Buttons enthält (#commenttype)), um dann zu verschwinden und fadeOut (sobald der Benutzer nur das erste Optionsfeld des beide ausgewählt hat. Das zweite Optionsfeld Umleitungen auf eine andere Seite, falls Sie sich wundern.)

Kann ich jemand helfen mit diesem letzten Punkt bekommen (zu fadeOut der ersten versteckten div) auf Klick des ersten Optionsfeldes?

Danke

Mein 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

Ich fühle mich wie ich etwas fehlen muss, weil dies ziemlich einfach scheint im Vergleich zu dem, was Sie bereits tun, aber hier geht:

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

****** EDIT ****

Für eine glattere und komplexere Animation als pro Antrag in den folgenden Kommentar, etwas tun, wie folgt aus:

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

Dies wird eine benutzerdefinierte Animation erstellen Sie die div der Radio-Buttons enthalten, verblassen, während gleichzeitig die Höhe auf Null reduziert wird, was das Springen Problem lösen wird. Die Callback-Funktion entfernt die div, nachdem die Animation abgeschlossen ist (keine notwendiger Schritt, aber hält das DOM im Einklang mit dem, was der Benutzer sieht).

Sehen Sie das Ergebnis: http://jsfiddle.net/8bCAg/