Using fadein and append

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.

score 169 · Accepted Answer · answered Nov 29 '08 at 16:49

169

If you hide the content before you append it and chain the fadeIn method to that, you should get the effect that you're looking for.

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

answered Nov 29 '08 at 16:49

Kevin Gorski

3,745
1
22
16

I'm trying $(elem).slideUp().appendTo(div).slideDown(); but it doesn't do it in order in FF5. I'm using slideUp's callback to then append and slideDown in order, but then append doesn't have a callback, so the element appears already visible. Kent Fredric's answer addresses this issue, so I'm only concerned on the append being executed before the slide Down. – TuteC Aug 05 '11 at 20:03
1

Kent's answer does address using animation methods like slideUp and slideDown with callbacks, but the OP only really needed an animation at the end of the method chain. Do you need further help? – Kevin Gorski Aug 08 '11 at 22:44

score 7 · Answer 2 · edited Aug 25 '12 at 15:10

7

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

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

Basically you're wrapping each piece of the content (each "post") in a span, setting that span's display to none so it doesn't show up, and then fading it in.

edited Aug 25 '12 at 15:10

Ali Ben Messaoud

11,690
8
54
87

answered Nov 29 '08 at 17:21

Parand

102,950
48
151
186

Excellent example of how to do simple things in a very complicated way. Sorry man ;) – Sliq Jun 06 '13 at 13:38

Firas · Answer 3 · 2010-02-20T00:13:36.180

4

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.

edited Feb 20 '10 at 00:13

answered Feb 19 '10 at 21:56

Firas

277
4
11

score 3 · Answer 4 · edited Oct 07 '12 at 11:01

3

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

edited Oct 07 '12 at 11:01

jonsca

10,218
26
54
62

answered Oct 07 '12 at 10:55

Ball_cs

31
1

score 3 · Answer 5 · answered Nov 29 '08 at 16:54

You have to be aware that the code doesn't execute linearly. The animated stuff can't be expected to halt code execution to do the animation and then return.


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

score 2 · Answer 6 · answered Jul 17 '11 at 13:03

assuming you have the following in the css defined:

.new {display:none}

and the javascript should be :

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

score 1 · Answer 7 · answered Dec 23 '11 at 18:40

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

slboat · Answer 8 · 2012-07-31T17:08:10.730

0

im have a exprensive,for this:

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

edited Jul 31 '12 at 17:08

answered Jul 31 '12 at 16:42

slboat

502
6
14

What's "exprensive"? – Pang Apr 11 '18 at 10:29

score 0 · Answer 9 · edited Apr 05 '18 at 05:18

0

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

edited Apr 05 '18 at 05:18

Ganesh Manickam

2,113
3
20
28

answered Apr 05 '18 at 04:28

Emanuel Silva

53
1
6

Using fadein and append

9 Answers9

Linked