1

いくつかのアニメーションにJqueryを使用するマイクロサイトをまとめようとしています。ページには4つのリンクがあり、それぞれがライトボックスを開きます。

背景が暗くなった後、「show」機能を使用してライトボックスを表示したいのですが、現時点ではこれは正常に機能しています。ただし、ライトボックスを閉じるときは、暗い背景が消える前に非表示にします。何らかの理由で、「非表示」機能が実行されると、ライトボックスパネルは縮小する前にページの下部まで拡張され、非表示機能が完了するまで待つのではなく、背景が同時にフェードします（フェードアウトがに書き込まれているにもかかわらず）非表示のコールバック）

私はJqueryを初めて使用するので、どこかで間違っていることはわかっていますが、誰かが助けてくれれば、私は最も感謝しています。

ライトボックスパネルの1つのJqueryコードを以下に記述します。現在のマイクロサイトを確認し、HTMLソースを表示するには、次のURLにアクセスしてください。

http://testing.xenongroupadmin.com/whatis/pfi

これまでのところ、ライトボックスの1つのコードのみを記述しました。左上のボックス「Whoneedsknow」をクリックしてください。

どんな助けでも大歓迎です！

ありがとう！

JQueryコード

$(document).ready(function(){

$("a#show-whopanel").click(function(){
 $("#lightbox, #who-panel").fadeIn(300, function(){
  $("div#animation1").show(600);
  })
 })

$("a#close-panel").click(function(){
 $("div#animation1").hide(600, function(){
  $("#lightbox, #who-panel").fadeOut(300);
  }
 );
})

}）

4

2 に答える 2

1

これを試して：

$(document).ready(function(){
  $("a#show-whopanel").click(function(){
   $("#lightbox, #who-panel").fadeIn(300, function(){
    $("div#animation1").show(600);
    })
   })
  $("a#close-panel").click(function(){
   $("#lightbox, #who-panel").fadeOut(300, function(){
    $("div#animation1").fadeOut(600);
    }
   );
  })
});
于 2012-07-25T08:03:30.240 に答える
1

より一般的なレベルでは、jQueryをデバッグするときに、コールバック関数を削除して、基本的な効果が機能しているかどうかを確認するのが効果的です。

したがって、クロージャは次のようになります。

$("a#close-panel").click(function(){
   $("div#animation1").hide(600, function(){
       $("#lightbox, #who-panel").fadeOut(300);
   });
});

基本的には、クリックすると、（1）アニメーション1を非表示にし、非表示が終了したら、（2）ライトボックスとwho-panelをフェードアウトします。

デバッグするには、これが何をするかを確認します。

$("a#close-panel").click(function(){
   $("div#animation1").hide(600);
});

そして、これが何をするかを確認します。

$("a#close-panel").click(function(){
       $("#lightbox, #who-panel").fadeOut(300);
});

次に、何が何をしているのか、どの効果がdivのサイズを大きくしてから消えるのかがわかります。

セミコロンもいくつか欠落していますが、それでも問題ありません。

編集：もっとよく見ると、なぜコールバックを使用しているのですか？ライトボックスとwho-panelを削除したいだけではありませんか？なぜanimation1を隠しているのですか？who-panelがフェードアウトすると、とにかくanimation1を見ることができなくなります。

于 2012-07-25T08:14:21.277 に答える