jQuery DIV slideDown（）調整跳轉

這似乎與jQuery slideDown Snap Back Issue類似，但略有不同。您可以訪問this site並瀏覽「圖片」部分以查看問題。如果您點擊某個相冊，內容會加載到該框中，但在調整大小時，它會認爲它仍然是相同的高度，因此它停在此高度。然後，它迅速跳到正確的高度。有任何想法嗎？jQuery DIV slideDown（）調整跳轉

var jBody = $("#pics .inner"); 
var jTitle = $("#pics .title"); 

$("#pics .album-container a").click(function(e) { 

    var strURL = $(this).attr("href"); 

    var strName = strURL.substr(strURL.indexOf("name=") + 5); 

    jBody.slideUp(100); 

    $.get(

     strURL, 

     function(strData) { 

      jTitle.text("Pictures - " + strName); 

      jBody.html(strData).slideDown(1000, "easeOutBounce"); 

     } 

    ); 

    e.preventDefault(); 

}); 

$("#pics a.back").click(function(e) { 

    var strURL = $(this).attr("href"); 

    jBody.slideUp(100); 

    $.get(

     strURL, 

     function(strData) { 

      jTitle.text("Pictures"); 

      jBody.html(strData).slideDown(1000, "easeOutBounce"); 

     } 

    ); 

    e.preventDefault(); 

});

來源

2011-12-11 Gabriel Ryan Nahmias

也許這些圖像在動畫被調用的時候並沒有加載，所以它不知道在什麼尺寸下拉伸盒子，只有在圖片被加載後，div才能伸展... – Nayish

你可以發佈代碼嗎正在使用，以便我們可以看到發生了什麼。另外對於上帝的愛不要自動播放音樂。 – Dormouse

這是一個樂隊的網站...我明白自動播放音樂的不屑，但在這種情況下，我相信這是有保證的。無論如何，代碼都在編輯中。 –

也許測試是這樣的：

jBody.html(strData).delay(500).slideDown(1000, "easeOutBounce");

正是這樣看它是否與動畫啓動圖像高度呈現前一個問題。

來源

2011-12-11 16:04:00 kontur

問題是，jQuery無法計算容器的實際高度，因爲您沒有指定高度，並且當您啓動動畫時，內部的內容可能未完全加載，如果您添加

div.album-container { 
     height:166px; 
} 
div.picture { 
    height: 133px; 
}

它會正常工作，如果你需要它更加可調，你可以使用min-height，或HTML插入後與jQuery設置高度和動畫化之前。

如果你想測試它，你可以在html設置後記錄console.log(jBody.height())，這樣你可以看到元素被動畫的實際全高。

來源

2011-12-11 16:39:50 NicoSantangelo

我接受了你的建議，但設置這些類的高度不起作用。然而，奇怪的是，即使在班上設置的高度，控制檯輸出也在200s範圍內，顯然不是合適的高度。 Hmmmm。不過謝謝你。你認爲'display：inline-block'與它有什麼關係？ –

我可以設置最小高度，但它可能並不總是足夠的。 –

當我在控制檯中設置高度時，這很奇怪。我不知道'display：inline-block'是主要的問題，但是一般的樣式。如果想到其他事情，我一定會讓你知道的 – NicoSantangelo

jQuery DIV slideDown（）調整跳轉

回答

相關問題