74

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

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

append我看到文件上的和,之间有区别appendTo。

我也试过这个：

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

我明白了，上面的伎俩！

但我得到"undefined"了我的 JSON 值之一。

4

9 回答 9

169

如果您在附加内容之前隐藏内容并将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-29T16:49:28.520 回答
7

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

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-29T17:21:02.433 回答
4

我认为这应该可以解决您的问题。

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

如果您正在执行追加，那么您必须改用 :last 选择器。

于 2010-02-19T21:56:43.960 回答
3

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


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

This is because the animation uses set timeout and other similar magic to do its job and settimeout is non-blocking.

This is why we have callback methods on animations to run when the animation is done ( to avoid changing something which doesn't exist yet ) 

   command(); 
   animation( ... function(){ 
      command(); 
   });
于 2008-11-29T16:54:50.847 回答
3 
$(output_string.html).fadeIn().appendTo("#list");
于 2012-10-07T10:55:31.347 回答
2

假设您在定义的 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-17T13:03:37.940 回答
1

首先是将接收到的数据转换为 jQuery 对象。第二，立即隐藏。第三，将其附加到目标节点。而且，毕竟，我们可以清楚地使用必要的动画，就像fadeIn :)

jNode = $("<div>first</div><div>second</div>");
jNode.hide();
$('#content').append(jNode);
jNode.fadeIn();
于 2011-12-23T18:40:59.427 回答
0

我有一个丰富的，为此：

$("dt").append(tvlst.ddhtml);
$("dd:last").fadeIn(700);
于 2012-07-31T16:42:04.140 回答
0

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

$("div").append("content-to-add").hide().fadeIn();
于 2018-04-05T04:28:01.307 回答