4

我有一个 div 正在接收来自 ajax 调用的内容。现在我只是在 ajax 回调处理程序中这样做：

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

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

4

4 回答 4

4

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

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

或者您可以将其淡入：

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

为确保您的页面在内容出现时不会“爆炸”，请确保 div 被隐藏以防止出现。此外，请确保添加内容后，页面看起来不错。

于 2009-03-26T19:51:41.767 回答
2

你可以一开始就隐藏它。然后插入html，当该功能完成后，对其进行显示效果。（就像你的幻灯片切换）

于 2009-03-26T19:48:55.767 回答
1

不确定这是否可行，但值得尝试：

  • 找出当前的 div 大小并将其设置为固定。
  • 更新 HTML
  • 将高度和宽度设置为“自动”。
于 2009-03-26T19:50:26.790 回答
1

当然，你可以试试这个：

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

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

于 2009-03-26T19:58:17.553 回答