0

例（リンクを参照）では、4つのボタンのうち3つがライトボックスを開きます。シーケンスは次のとおりです。

  1. ユーザークリック
  2. 背景が黒くなります
  3. ライトボックスが表示されます
  4. ライトボックスのコンテンツがフェードインします

これは、ユーザーが以前にそのライトボックスを開いていたとしても、ユーザーがリンクをクリックするたびに発生するはずです。2つのリンク（右上と左下）では問題なく機能しますが、もう1つ（左上）では、ユーザーが最初にクリックしたときに問題なく機能しますが、ライトボックスを閉じて再度開いた後、コンテンツは既に存在し、表示されます右から「フライイン」します。ライトボックスのコードは、IDタグを除いて同じです。

なぜこうなった？！！

表示するためのリンクは次のとおりです。

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

Jqueryコードは次のとおりです。

$(document).ready(function(){
 $("a#show-whopanel").click(function(){
  $("#lightbox").fadeIn(300, function(){
   $("#who-panel").show(600, function(){
   $("#animation1").fadeIn(1000)
   });
  });
 });
 $("a#close-panel1").click(function(){
  $("#lightbox, #who-panel").fadeOut(300, function(){
   $("div#animation1").hide(300);
   }
  );
 });
});

$(document).ready(function(){
 $("a#show-whatpanel").click(function(){
  $("#lightbox").fadeIn(300, function(){
   $("#what-panel").show(600, function(){
   $("#animation2").fadeIn(1000)
   });
  });
 });
 $("a#close-pane2").click(function(){
  $("#lightbox, #what-panel").fadeOut(300, function(){
   $("div#animation2").hide(600);
   }
  );
 });
});

$(document).ready(function(){
 $("a#show-prosconspanel").click(function(){
  $("#lightbox").fadeIn(300, function(){
   $("#proscons-panel").show(600, function(){
   $("#animation3").fadeIn(1000)
   });
  });
 });
 $("a#close-panel3").click(function(){
  $("#lightbox, #proscons-panel").fadeOut(300, function(){
   $("div#animation3").hide(600);
   }
  );
 });
});
4

1 に答える 1

0

私はそれを考え出した！

JQueryコードに問題はなかったことがわかりました。単純にHTMLマークアップでは、画面を黒にフェードするために使用されたdiv要素は、最初のライトボックスパネルのdivの下にありましたが、他の2つの上にありました。私はそれを取り出して上に移動し、Hey Presto！- できます！

于 2012-07-25T12:47:30.443 に答える