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

Question

在示例中（请参阅链接）四个按钮中的三个打开了lightbox。顺序如下：

1. 用户点击
2. 背景渐变为黑色
3. 灯箱显示
4. 灯箱内容淡入

这应该发生在用户每次点击链接时，即使他们以前已经打开过这个灯箱。对于其中两个链接（右上角和左下角），它工作得很好，但对于另一个（左上角），它在用户第一次单击时正常工作，但在关闭Lightbox并重新打开后，内容已经存在并出现从右边'飞入'。除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为第一个灯箱面板，但高于另外两个。我把它拿出来，把它移到顶部，嘿Presto！ - 有用！