JQuery的「隱藏」功能奇怪地行事

我正在嘗試將一些使用Jquery的微型網站放在一起製作一些動畫。有4個鏈接，每個打開一個燈箱。JQuery的「隱藏」功能奇怪地行事

我想要在背景變暗之後使用「顯示」功能顯示燈箱 - 此時此功能正常工作。但是，當燈箱關閉時，我希望在黑暗背景消失之前將其隱藏起來。出於某種原因，執行「隱藏」功能時，lightbox面板會在收縮之前擴展到頁面底部，並且背景會同時淡化，而不是等到隱藏功能完成爲止（儘管已將淡出寫入回調的皮）

我是Jquery的新手，所以我知道我在某個地方弄錯了，但如果有人能幫助我，我會非常感激。

其中一個燈箱面板的Jquery代碼如下所示。看到微型，因爲它代表的那一刻，並查看HTML源代碼，請訪問：

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

到目前爲止，我只寫代碼的燈箱之一 - 點擊左上角盒標題爲「誰需要知道」。

任何幫助將不勝感激！

謝謝！

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); 
    } 
); 
})

}）

來源

2012-07-25 Chris

爲什麼你使用show＆fadeIn或hide＆fadeOut？他們都有回調，都可以有相同動畫的持續時間。使用show/hide或fadeIn/fadeOut – avall 2012-07-25 08:08:30

在更廣泛的層面調試jQuery的時候，它支付去除回調函數，看看基本效果是否起作用。

所以，你的封如下：

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

它基本上是說：在點擊，（1）隱藏動畫1，當隱藏已完成，（2）淡出收藏和誰面板。

要調試，要檢查一下這個是幹什麼：

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

再檢查一下這個是幹什麼：

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

然後你就會知道這是做什麼，並且其作用是使在它消失之前，div的大小會增加。

你也錯過了一些分號，雖然這應該是好的。

編輯：仔細一看，你爲什麼要使用回調？你不只是想擺脫燈箱和誰面板？你爲什麼隱藏animation1？如果誰將面板淡出，您將無法看到animation1！

來源

2012-07-25 08:14:21 Nick

試試這個：

$(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-25 08:03:30 pat34515

JQuery的「隱藏」功能奇怪地行事

回答

相關問題