Question

我有一个正在接收来自ajax调用的内容的div。现在我只是在ajax回调处理程序中执行此操作：

function searchCallback(html) { $("#divSearchResults").html(html); }

这会使内容“弹出”到页面上，而且非常突然。有没有办法让div优雅地调整大小，就像.slideToggle（）方法一样？

Answer 1

确保其已隐藏，然后添加内容并将其滑入。

$("#divSearchResults").hide();
$("#divSearchResults").html(html);
$("#divSearchResults").slideDown();

或者你可以淡出它：

$("#divSearchResults").fadeIn();

要确保在内容显示时您的页面没有“爆炸”，请确保div隐藏为与。此外，请确保添加内容后，页面看起来很好。

Answer 2

你可以把它隐藏起来。然后插入html，当该功能完成后，对它进行显示效果。（比如你的slideToggle）

Answer 3

不确定这会有效，但值得一试：

找出当前的div大小并将其设置为固定。
更新HTML
将高度和宽度设置为“自动”。

Answer 4

当然，你可以试试这个：

function searchCallback(html) {
    var html_hidden = $('<div style="display:none;" class="hidden_insert">'+html+'</div>');
    $('#divSearchResults').html(html);
    $('#divSearchResults .hidden_insert').slideDown('medium');
}

不是最漂亮的东西，但它会起作用。您可以通过为类'hidden_insert'创建一个CSS样式来实现它，这样可以使默认情况下隐藏该类的元素。另外，在你的后端，你发送这个日期，你可以在那里而不是在你的javascript中进行包装。然后可以将脚本简化为：

function searchCallback(html) { 
    $('#divSearchResults').html(html).find('.hidden_insert').slideDown('medium');
}

我没有测试过这些，但它们应该有用。

用动画展开div

4 个答案: