Question

我正在将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;
    });

基本上你将每个内容（每个“帖子”）包裹在一个范围内，将该范围的显示设置为无，以便它不显示，然后将其淡入。

Answer 3

这应该可以解决你的问题。

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

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

Answer 4

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


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

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 Object。其次，立即隐藏它。第三，将其附加到目标节点。并且，在这之后，我们可以清楚地使用必要的动画，就像fadeIn：）

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

Answer 8

我有一个深度，为此：

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

Answer 9

我尝试了你所说的诀窍但是没有用。 使用以下代码

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

使用fadein并附加

9 个答案: