2

ここに投稿するのはこれが初めてで、このサイトを見つけてから数週間にわたって多くの役立つ情報を読みました!

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

  • 要素（.btn-leavecomment）をクリックすると、

  • 非表示の div (#commenttype) は、slideDown によって表示されます。この非表示の div には、2 つのラジオ ボタンが含まれています。

  • 「最初の」ラジオ ボタン (.reveal_ccform) をクリック/選択すると、別の非表示の div が表示されます (ここまではすべて機能しています)。

  • 次に、最初の非表示の div (ラジオ ボタン (#commenttype) を含む) を非表示にしてフェードアウトします (ユーザーが 2 つのラジオ ボタンのうち最初のラジオ ボタンのみを選択すると、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


});
4

1 に答える 1

2

これはあなたがすでに行っていることと比較して非常に単純に思えるので、何かが欠けているように感じますが、ここに行きます:

$('.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/

于 2010-08-10T22:04:31.623 に答える