兩個幾乎相同的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！ - 有用！