jQuery DIV SlideDown() 调整大小跳转

Question

这似乎与 jQuery slipDown Snap Back Issue 类似，但略有不同。您可以访问此网站并浏览“图片”部分来查看问题。如果您单击相册，内容会加载到框中，但是当调整大小时，它认为它仍然是相同的高度，因此，它会停止在该高度。然后，它会快速跳到正确的高度。有什么想法吗？

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

看看在渲染图像高度之前启动动画是否存在问题。