Ajax 追加结果和动画答案

【问题标题】：Ajax append result and animateAjax 追加结果和动画
【发布时间】：2012-03-23 11:12:21
【问题描述】：

我正在尝试附加 ajax 数据和 slideDown Ajax 结果数据（类似 twitter 加载更多）

试过下面的代码

$("#main").append(html).slideDown();

但数据显示时没有任何动画。

如何从 PHP 端附加和动画化 html 数据？

【问题讨论】：

【解决方案1】：

您需要先.hide() 容器，然后再将其附加到容器并向下滑动。

对.hide() 的调用会将CSS 样式设置为display: none;，这意味着附加内容在开始向下滑动之前不会显示任何内容。

所以：

$('#main').hide().append(html).slideDown();

至于如何在 PHP 端附加 HTML 数据并为其设置动画，您需要遵循类似的策略 - 使用 PHP 将内容插入到样式为 display: none; 的 <div> 中，然后使用 jQuery向下滑动。

【讨论】：

我不想隐藏父级 - #main div。我想动画结果
它将动画化结果 - 它首先隐藏 div 的内容，以便 slideDown 可以将其从完全隐藏过渡到具有越来越高的高度，直到它完成。那有意义吗？请参阅this jsFiddle 以了解其工作原理。
请创建聊天室以便我们讨论。我想向您展示实际操作中的页面。提前谢谢。
聊天室应该在这里：chat.stackoverflow.com/rooms/info/8557/…

【解决方案2】：

.slideDown() 为隐藏的元素设置动画，就像它们出现一样。因为我假设#main 已经可见，所以当您将项目附加到它时，它们会简单地显示出来。

您需要做的是将您的内容附加到 #main 底部的隐藏 div 并在该隐藏 div 上调用 .slideDown()。

如果您想重复执行此操作，您可以在回调中调用.unwrap()，以便稍后添加隐藏元素：

$('#myHiddenDiv').slideDown("slow", function() {
   $(this).children().unwrap();
});

【讨论】：

【解决方案3】：

我猜你想滑动新创建的元素而不是#main。你这个。

$(html).css('display','none').appendTo($("#main")).slideDown();

【讨论】：

这仍然行不通。将内容附加到 #main 后即可看到。
正如 GregL 所说，您的元素首先应该是不可见的。 $(html).css('display','none').appendTo($("#main")).slideDown();
这不适用于html 中的所有内容。例如，纯文本将不起作用。此外，如果html 没有一个父包装器，则每个元素将单独slideDown。见：jsfiddle.net/kDsjL/1
slideDown 函数需要内部元素是块元素，如果是浮动元素如或者什么都没有，则不起作用。