تلاشي Div بعد مشكلة حدث Onclick

Question

هذه هي المرة الأولى التي نشرت فيها هنا وقرأت الكثير من الأشياء المفيدة خلال الأسابيع القليلة الماضية منذ أن وجدت الموقع!

لذا ، سؤالي هو: لدي الرمز التالي على موقعي وما أحاول فعله هو ...

• عندما يتم النقر على عنصر (.BTN-LeaveComment) ،

• يتم الكشف عن Div المخفي (#CommentType) عبر Slidedown. يحتوي هذا DIV المخفي على زريين راديو.

• عند النقر/اختيار زر الراديو "الأول" (.reveal_ccform) ، أرغب في الكشف عن Div آخر مخفي (لدي كل هذا أعمل هنا)

• أود بعد ذلك أن يختفي أول div المخفية (التي تحتوي على أزرار الراديو (#CommentType)) كنت تتساءل.)

هل يمكن لأي شخص أن يساعد في الحصول على هذه النقطة الأخيرة (لتتلاشى أول Div المخفي) بنقرة زر الراديو الأول؟

شكرًا لك

رمز بلدي:

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

أشعر أنني يجب أن أفتقد شيئًا ما ، لأن هذا يبدو بسيطًا جدًا مقارنة بما تفعله بالفعل ، ولكن هنا تذهب:

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

******تعديل****

للحصول على رسوم متحركة أكثر سلاسة وأكثر تعقيدًا وفقًا للطلب في التعليق التالي ، افعل شيئًا كهذا:

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

سيؤدي ذلك إلى إنشاء رسوم متحركة مخصصة لتتلاشى DIV التي تحتوي على أزرار الراديو مع تقليل الارتفاع في وقت واحد إلى الصفر ، مما سيحل مشكلة القفز. تزيل وظيفة رد الاتصال DIV بعد اكتمال الرسوم المتحركة (ليست خطوة ضرورية ، ولكنها تبقي DOM بما يتماشى مع ما يراه المستخدم).

انظر النتيجة: http://jsfiddle.net/8bcag/