Question

这似乎与jQuery slideDown Snap Back Issue类似，但略有不同。您可以访问this site并浏览“图片”部分以查看问题。如果你点击一个专辑，内容会加载到框内，但是，当调整大小时，它认为它仍然是相同的高度，因此，它停在那个高度。然后，它会迅速跳到正确的高度。有什么想法吗？

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

} );

Answer 1

问题是jQuery无法计算容器的实际高度，因为您没有指定高度，并且当您触发动画时内部的内容可能没有完全加载，如果你添加

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

它可以正常工作，如果你需要它可以更加可调，你可以使用min-height，或者在插入html之后和之前设置jQuery的高度。

如果你想测试它，你可以在设置html后记录console.log(jBody.height())，这样你就可以看到元素被动画化的实际全高度。

Answer 2

也许测试类似：

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

就这样看看在渲染图像高度之前动画开始是否存在问题。

jQuery DIV slideDown（）调整大小跳转

2 个答案: