Possible to animate jQuery prepend?

Question

I am prepending some data to my page on a button click and instead of just populating immediately on the page, I was wondering if there is a way to animate the prepend() using slideToggle or CSS animation.

Here is my current script:

var data = $('.data').html();
var insert = '<div class="data-container">'+ data +'</div>';
$('button').click(function(){
    $('.data-container').remove();
    $('.initial').prepend(insert);
});

and a JSFiddle

Possibly a duplicate of http://stackoverflow.com/questions/1520178/ — blgt, Jun 26 '14 at 15:03
Perfect @EhsanSajjad, if you want to turn that into an answer, I will gladly accept it when I am able to. Thanks! — APAD1, Jun 26 '14 at 15:05

score 21 · Answer 1 · edited Jul 25 '17 at 13:48

21

This one liner works great for me, even without the clone()

I'm using it like so:

var elementToPrepend = "<div>Your content</div>";
$(elementToPrepend).hide().prependTo(".prependHere").fadeIn();

Edit: Proper one-liner would be:

$("<div>Your content</div>").hide().prependTo(".prependHere").fadeIn();

Source

edited Jul 25 '17 at 13:48

Exil

311
2
11
26

answered Jul 24 '15 at 23:39

Can Rau

3,130
1
23
33

score 6 · Accepted Answer · answered Jun 26 '14 at 15:05

You have to do something like this:

var data = $('.data').html();
var insert = '<div class="data-container">'+ data +'</div>';
$('button').click(function(){
    $('.data-container').remove();
    $('.initial').hide();
    $('.initial').prepend(insert);
    $('.initial').slideToggle();

});

FIDDLE UPDATED

score 4 · Answer 3 · answered Jul 09 '18 at 15:12

You can animate prepend() or append() quite easy. Just pass the whole animated object as a parameter, like so:

$("#container").prepend( $(data).hide().delay(500).show('slow') );

If you like it more readable:

var object = $(data).hide().delay(500).show('slow');
$("#container").prepend(object);

martincarlin87 · Answer 4 · 2015-10-27T17:15:23.150

3

Like this? http://jsfiddle.net/zR9fN/5/

CSS

/* add display:none; to keep it hidden after being prepended */
.data-container {
    display:none;
    ...
}

jQuery

....
$('.initial').prepend(insert);
$('.data-container').fadeIn('slow'); // fade in the prepended content that was hidden

edited Oct 27 '15 at 17:15

answered Jun 26 '14 at 15:05

martincarlin87

10,848
24
98
145

score 1 · Answer 5 · answered Jun 26 '14 at 15:07

var data = $('.data').html();
var insert = '<div id="animationWrapper" style="height: 0"><div class="data-container">'+ data +'</div></div>';
$('button').click(function(){
    $('.data-container').remove();
    $('.initial').prepend(insert);
    jQuery('#animationWrapper').animate({height: '300px'}, 5000, function(){console.log('Yammie!')})
});

Please check the syntax, but this should be a start.

score 1 · Answer 6 · answered Dec 23 '14 at 08:55

1

You can simply animate before prepending. If you animate it before prepending it will appear with animation.

for example

childContainer.fadeIn(1000);
$(containerElement).prepend(childContainer);

Alternative to fadeIn you can use any animation.

answered Dec 23 '14 at 08:55

Trikaldarshiii

11,174
16
67
95

score 0 · Answer 7 · answered Dec 24 '19 at 03:26

0

I had to do in two lines to get a smooth slideDown animation:

$("<div>Your content</div>").hide().prependTo(".prependHere");
$(".prependHere:first-child").slideDown();

answered Dec 24 '19 at 03:26

kravits88

12,431
1
51
53

Possible to animate jQuery prepend?

7 Answers7

Linked