Question

在示例中（参见链接），四个按钮中的三个打开了一个灯箱。顺序如下：

用户点击
背景淡化为黑色
灯箱出现
灯箱内容淡入

每次用户点击链接时都会发生这种情况，即使他们之前已经打开过该灯箱。对于其中两个链接（右上角和左下角），它工作得很好，但对于另一个（左上角），它在用户第一次点击时工作正常但在关闭灯箱并重新打开后，内容已经存在并且出现从右边'飞入'。除了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);
   }
  );
 });
});

Answer 1

我明白了！

原来，JQuery代码没有问题。只需在HTML标记中，用于将屏幕淡入黑色的div元素就是低于第一个灯箱面板的div，但高于其他两个。我拿出来把它移到了顶部和Hey Presto！ - 它有效！

两个几乎相同的jquery代码片段的工作方式不同

1 个答案: