イベントの問題をオンクリックした後のフェードアウトdiv

Question

ここに投稿するのはこれが初めてであり、このサイトを見つけてから過去数週間にわたって多くの役立つものを読んだことがあります！

だから、私の質問は次のとおりです。私は自分のサイトに次のコードがあり、私がやろうとしているのは...

• 要素（.btn-leavecomment）がクリックされると、

• Hidden Div（#commentType）がSlidedownを介して明らかになります。このHidden Divには、2つのラジオボタンが含まれています。

• 「ファースト」ラジオボタン（.reveal_ccform）のクリック/選択で、別の隠しdivを明らかにしたい（これはすべてここで動作している）

• 次に、最初のHiddenDiv（ラジオボタン（#commentType）を含む）が消えてフェードアウトします（ユーザーが2つの最初のラジオボタンのみを選択したら。あなたは疑問に思っていました。）

最初のラジオボタンをクリックすると、その最後のポイント（最初の隠し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/