使用动画扩展 div 元素

Question

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

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

这会使内容突然出现在页面上，很突兀。有没有办法使div优雅地调整大小，就像.slideToggle()方法一样？

- Jon T

Answer 1

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

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

或者您可以使用淡入效果：

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

为了确保页面在内容出现时不会“爆炸”，请确保该div最初是隐藏的。此外，请确保添加内容后，页面看起来正常。

- SkippyFire

---

太好了，你的回答帮助我将其向下滑动：$('#divid').slideDown(); $('#divid').css('display','block');。但是如何将其向上滑动？似乎有一个函数slideUp()，但在我的代码中没有效果：$('#divid').css('display','none'); $('#divid').slideUp(); - ulkas

没事了，我找到了。没有必要玩弄CSS的display:block / display:none，函数slideDown(); / slideUp()会自己完成。 - ulkas

Answer 2

您可以一开始将其隐藏。然后插入HTML，当该函数完成时，在其上执行 show 效果。（例如 slideToggle）。

- Ólafur Waage

---

这会导致 div 消失，使周围的所有内容突然塌陷。 - Seb

谢谢，这让我找到了最终的解决方案。我在 div 上调用 "slideUp" 方法，并带有一个回调方法。然后在该回调中（一旦 div 被隐藏），我设置内容并调用 "slideDown" 方法。虽然有很多回调函数串在一起，但它确实有效。 - Jon Tackabury

Answer 3

不确定这个方法是否可行，但值得一试：

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

- Seb

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

我没有测试过它们，但它们应该可以工作。

- KyleFarris

---

谢谢你，Kyle。这跟我的最终解决方案也相似。:) - Jon Tackabury