Ajax附加结果和动画

Question

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

尝试以下代码

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

但数据没有任何动画。

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

Answer 1

我想你想要新建的元素而不是#main。 是的。

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

Answer 2

.slideDown()动画显示隐藏的元素。因为我认为#main已经可见，所以当您向其添加项目时，它们只会显示出来。

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

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

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

示例：http://jsfiddle.net/6VQwb/1/

Answer 3

在添加容器并将其向下滑动之前，您需要.hide()容器。

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

所以：

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

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