jQuery的滑塊，幻燈片不走全寬，如果父母是顯示：無

Question

我爲一個投資組合製作腳本當你點擊投資組合項目之一div將出現像這樣的jQuery的onclick功能：

$('#portfolioItem').click(function() { 
    $('#divThatWillApear').show(); 

這一切工作正常。我也下載了一個名爲滑塊glide.js。這個滑塊也工作得很好。

但只要我結合我的劇本和滑塊togheter滑塊行事怪異。

我創建了一個jsfiddle：http://jsfiddle.net/skunheal/fzftX/2/

幻燈片不縮放到滑塊的全部寬度。但是當你重新調整他們所做的窗口時。當我從我的父元素（portfolioOverlay）中刪除顯示沒有任何顯示，它突然工作都很好...

任何人有一個想法什麼是錯誤的，以及如何解決它？

希望聽到任何人！

Answer 1

一個簡單的解決將是初始化滑塊點擊顯示後，解決這個問題。

$('#show').click(function() { 
    $('#portfolioOverlay').show(); 
    $('.slider').glide(); 
}); 

Demo Fiddle

Answer 2

您的.slider寬度正在搞亂，因爲父母的寬度爲display:none;。

我加入到 「固定」 它的.slider

width: 100%; 

到

width: 500px; // same as parent element, this means you are joining the width to the width of the parent however 

更新的jsfiddle：

http://jsfiddle.net/cB3Pn/

Answer 3

由於portfolioItem是display:none負載是/位置不能由你的代碼來計算大小。刪除display:none CSS並將以下內容添加到JavaScript的底部將解決此問題，因爲一旦JavaScript已運行，它將隱藏portfolioItem。

$('#portfolioOverlay').hide(); 

Answer 4

你可以表示拉頭後自己觸發resize事件：

$('#show').click(function() { 
    $('#portfolioOverlay').show(); 
    $(window).resize(); 
});