用动画展开div

Question

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

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

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

Answer 1

您可以将其隐藏起来。然后插入HTML，完成该功能后，对其进行显示影响。 （就像您的slidetoggle）

Answer 2

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

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

或者您可以淡入它：

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

为了确保您的页面在内容出现时不会“爆炸”，请确保DIV隐藏在与之相处。另外，请确保添加内容后，页面看起来不错。

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

我还没有测试过其中任何一个，但它们应该可以工作。