使用淡入淡出和追加

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

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

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

我尝试这样做，以及：

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

我得到了它，上面的伎俩！

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

来源

2008-11-29 Coughlin

168

如果您在追加内容并将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();

来源

2008-11-29 16:49:28

谢谢你的帮助凯文 – Coughlin 2008-11-30 05:09:30

工作很好，谢谢。 – cweston 2009-07-02 05:04:57

您必须知道代码不会线性执行。动画的东西不能期望停止代码执行动画，然后返回。


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

 这是因为动画使用set timeout和其他类似的魔术来完成它的工作，并且settimeout是非阻塞的。
 这就是为什么我们对动画的回调方法，当动画完成（以避免改变一些东西，还不存在）

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

来源

2008-11-29 16:54:50

我不知道我完全理解这个问题上运行你有，但这样的事情应该工作：

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

基本上你包裹每件作品的跨度的含量（每“后”），创下跨度的显示屏无法比拟的，因此不会显示出来，然后逐渐把它。

来源

2008-11-29 17:21:02 Parand

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

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

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

来源

2010-02-19 21:56:43 Firas

假设你已经定义的CSS如下：

.new {display:none}

和JavaScript应该是：

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

来源

2011-07-17 13:03:37

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

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

来源

2011-12-23 18:40:59 Sam

IM有exprensive，对于这个：

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

来源

2012-07-31 16:42:04 slboat

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

来源

2012-10-07 10:55:31

使用淡入淡出和追加

回答

相关问题