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', ''));
        });
    }
});

Answer 2

您需要通过以下几个步骤完成此操作：

首先，将新数据放在不同的div中，理想情况下隐藏在dom中，或者甚至不在dom上。
其次，弄清楚第二个div有多高
通过动画设置第一个div的高度，动画完成后，替换内容

所以有些代码：

// put the content into a hidden div
$('#hiddendiv').html(content);

// get the target height
var newHeight = $('#hiddendiv').height();

// animate height and set content
$('#menu').animate({'height': newHeight}, function(){
    $('#menu').html($('#hiddendiv').html());
});

Answer 3

我相信我有一个更清洁，更好的解决方案，涉及容器：

<div id="menu_container">
  <div id="menu">
    <p>my content</p>
  </div>
</div>

我所做的是将容器的maxHeight和minHeight锁定到div的当前高度。然后我改变了所说div的内容。最后，我将容器的最大和最小高度“释放”到内部div的当前高度：

$("#menu_container").css("min-height", $("#menu").height());
$("#menu_container").css("max-height", $("#menu").height());
$("#menu").fadeOut(500, function() {

    //insert here the response from your ajax call
    var newHtml = serverResponse;

    $(this).html(newHtml).fadeIn(500, function() {
        $("#menu_container").animate({minHeight:($("#menu").height())},500);
        $("#menu_container").animate({maxHeight:($("#menu").height())},500);
    });
});

Answer 4

一个不错的解决方案是在div#menu回调

上呈现success对象

$.ajax({
  url: $(this).data('redraw-event-url'),
     dataType: 'script',
     success: function(){
        $('div#menu').animate({'height': 'something');
        }
     })

希望这会有所帮助

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

4 个答案: