当内容发生变化时,对div的高度变化进行动画处理

Question

我有一个div#menu显示信息列表.该信息通过ajax更改.当它改变时,我想动画从高度A到高度B的过渡.

我知道我可以使用,.animate({'height': 'something')但我不知道如何将所有这些粘在一起.

我正在使用jQuery.

我怎样才能做到这一点？

编辑.

ajax调用如下所示:

$.ajax({
  url: $(this).data('redraw-event-url'),
     dataType: 'script'
     }) 

Answer 1

您可以将新HTML添加到屏幕外的DOM中,以便用户无法看到它.然后获取它的高度,并在将新HTML从临时屏幕外位置移动到其最终目的地之前更改容器的高度.像这样的东西:

$.ajax({
    success : function (serverResponse) {

        //add the new HTML to the DOM off-screen, then get the height of the new element
        var $newHTML  = $('<div style="position : absolute; left : -9999px;">' + serverResponse + '</div>').appendTo('body'),
            theHeight = $newHTML.height();

        //now animate the height change for the container element, and when that's done change the HTML to the new serverResponse HTML
        $('#menu').animate({ height : theHeight }, 500, function () {

            //notice the `style` attribute of the new HTML is being reset so it's not displayed off-screen anymore
            $(this).html($newHTML.attr('style', ''));
        });
    }
});