使用 fadein 和 append

我正在加载 JSON 数据到我的页面，并使用 appendTo()，但我试图淡出我的结果，有什么想法吗？

$("#posts").fadeIn();
$(content).appendTo("#posts");

我在文档中看到了 append和 appendTo之间的区别。

我也试过这个:

$("#posts").append(content).fadeIn();

我知道了，上面的东西起作用了！

但是我得到 "undefined"作为我的 JSON 值之一。

54725 次浏览
小开
最佳答案

如果在追加内容之前隐藏内容并将 fadeIn 方法链接到该内容，则应该会得到所需的效果。

// Create the DOM elements
$(content)
// Sets the style of the elements to "display:none"
.hide()
// Appends the hidden elements to the "posts" element
.appendTo('#posts')
// Fades the new content into view
.fadeIn();
小开

您必须意识到代码不是线性执行的。不能期望动画的内容停止代码执行来完成动画，然后返回。


commmand();
animation();
command();

这是因为动画使用设置超时和其他类似的魔术来完成它的工作，设置超时是非阻塞的。

这就是为什么我们在动画上有回调方法在动画完成时运行(以避免更改还不存在的东西)

command();
animation( ... function(){
command();
});
小开

我不知道我是否完全理解你的问题，但是像这样的事情应该会起作用:

HTML:

<div id="posts">
<span id="post1">Something here</span>
</div>

Javascript:

var counter=0;


$.get("http://www.something/dir",
function(data){
$('#posts').append('<span style="display:none" id="post' + counter + ">" + data + "</span>" ) ;
$('#post' + counter).fadeIn();
counter += 1;
});

基本上，您将内容的每个部分(每个“帖子”)包装在一个 span 中，将 span 的显示设置为不显示，然后将其淡入。

小开

我想这应该能解决你的问题。

$('#content').prepend('<p>Hello!</p>');
$('#content').children(':first').fadeOut().fadeIn();

如果使用 append，则必须使用: last 选择器。

小开

假设您在 css 中定义了以下内容:

.new {display:none}

Javascript 应该是:

$('#content').append('<p class='new'>Hello!</p>');
$('#content').children('.new').fadeIn();
$('#content').children.removeClass('new');
$('#content').children('.new').hide();
小开

首先是将接收到的数据转换为 jQuery 对象。 第二，马上把它藏起来。 第三，将其附加到目标节点。 而且，在这之后，我们可以清楚地使用必要的动画，就像 fadeIn:)

jNode = $("<div>first</div><div>second</div>");
jNode.hide();
$('#content').append(jNode);
jNode.fadeIn();
小开

我有一个表达，为此:

$("dt").append(tvlst.ddhtml);
$("dd:last").fadeIn(700);
小开 
$(output_string.html).fadeIn().appendTo("#list");
小开

我试过你说的方法，但没用。 它使用以下代码 

$("div").append("content-to-add").hide().fadeIn();

提交答案