Question

I am loading JSON data to my page and using appendTo() but I am trying to fade in my results, any ideas?

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

I saw that there is a difference between append and appendTo, on the documents.

I tried this as well:

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

I got it, the above did the trick!

But I get "undefined" as one of my JSON values.

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

I don t know if I fully understand the issue you re having, but something like this should work:

HTML： Hypertext Markup Language（超文本标记语言）

<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的显示设置为none，以便它不会显示，并然后淡入。

Answer 3

This should solve your problem I think.

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

If you are doing append instead then you have to use the :last selector instead.

Answer 4

你必须意识到代码不是线性执行的。动画不能期望停止代码执行以进行动画，然后返回。


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

这是因为动画使用了settimeout和其他类似的魔术来完成其工作，而settimeout是非阻塞的。

这就是为什么我们在动画上使用回调方法来运行当动画完成时（避免修改尚不存在的东西）的原因。

   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

First is convert received data to jQuery Object. Second, hide it immediately. Third, append it to a target node. And, after this all, we can clearly use necessary animation, just like 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

I tried what you said did the trick but is not working. it worked with the following code

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

友情链接