使用淡入淡出和追加

我正在加载JSON数据到我的页面，并使用appendTo（），但我想淡入我的结果，任何想法？

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

我看到在文档上的append和appendTo是有区别的。

我也试过这个：

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

我明白了，上面的窍门！

但我得到“未定义”作为我的JSON值之一。

Answer 1

如果您在添加内容之前隐藏了内容，并将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(); 

Answer 2

我不知道我是否完全理解你遇到的问题，但这样的事情应该工作：

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

基本上你是把每一个内容（每个“post”）都包在一个范围内，把范围的显示设置为none，所以不显示，然后淡入。

Answer 3

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

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

如果你正在做append，那么你必须使用：lastselect器。

Answer 4

您必须意识到代码不会线性执行。 animation的东西不能期望停止代码执行animation，然后返回。

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

这是因为animation使用set timeout和其他类似的魔法来完成它的工作，并且settimeout是非阻塞的。

这就是为什么我们在animation完成时要在animation上使用callback方法（以避免改变不存在的东西）

   命令（）; 
   animation（... function（）{ 
      命令（）; 
    }）;

Answer 5

 $(output_string.html).fadeIn().appendTo("#list"); 

Answer 6

假设你在css中定义了以下内容：

 .new {display:none} 

和JavaScript应该是：

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

Answer 7

首先是将收到的数据转换为jQuery对象。 其次，立即隐藏它。 第三，将其追加到目标节点。 而且，在这之后，我们可以清楚地使用必要的animation，就像fadeIn 🙂

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

Answer 8

即时通讯有一个exprensive，为此：

 $("dt").append(tvlst.ddhtml); $("dd:last").fadeIn(700);