jQuery using append with effects
Solution 1
Having effects on append won't work because the content the browser displays is updated as soon as the div is appended. So, to combine Mark B's and Steerpike's answers:
Style the div you're appending as hidden before you actually append it. You can do it with inline or external CSS script, or just create the div as
<div id="new_div" style="display: none;"> ... </div>
Then you can chain effects to your append (demo):
$('#new_div').appendTo('#original_div').show('slow');
Or (demo):
var $new = $('#new_div');
$('#original_div').append($new);
$new.show('slow');
Solution 2
The essence is this:
- You're calling 'append' on the parent
- but you want to call 'show' on the new child
This works for me:
var new_item = $('<p>hello</p>').hide();
parent.append(new_item);
new_item.show('normal');
or:
$('<p>hello</p>').hide().appendTo(parent).show('normal');
Solution 3
Another way when working with incoming data (like from an ajax call):
var new_div = $(data).hide();
$('#old_div').append(new_div);
new_div.slideDown();
Solution 4
Something like:
$('#test').append('<div id="newdiv">Hello</div>').hide().show('slow');
should do it?
Edit: sorry, mistake in code and took Matt's suggestion on board too.
Solution 5
When you append to the div, hide it and show it with the argument "slow"
.
$("#img_container").append(first_div).hide().show('slow');
Related videos on Youtube
sadradio
Updated on April 19, 2021Comments
-
sadradio about 3 years
How can I use
.append()
with effects likeshow('slow')
Having effects on
append
doesn't seem to work at all, and it give the same result as normalshow()
. No transitions, no animations.How can I append one div to another, and have a
slideDown
orshow('slow')
effect on it? -
Matt Ball over 14 yearsNot sure if that would do what he wants, but if so, you'd chain the functions:
$('#divid').append('#newdiv').hide().show('slow')
. -
Mark Bell over 14 yearsIt does work; the #newdiv bit is wrong though and you're right, you can chain them. I've edited my answer now.
-
danp about 14 yearswas probably the inline style, adding a css class like "hidden" which equates to display: none is .. "classier" (baddoom tsh) ;)
-
Vic over 11 yearsThis won't work. When you use append, it will return the original_div not the newly appended element. So you are actually calling show on the container.
-
Matt Ball over 11 years@Vic as it happens
.append()
doesn't even take a selector string. The idea's still correct though. Thanks, updated. -
Drew Dello Stritto over 11 yearsThe demo works perfectly, but it assumes the content exists - so it won't work if you are generating the content, eg. pulling an image's alt content to create a title or div...
-
Chris22 over 10 yearsI've tried both of these ways and it doesn't work. There is no smooth sliding effect on the appended content.
-
honk31 almost 10 years
'normal'
is not a proper string for speed. leave it blank for no transition (shows up immediately). use string'fast'
for 200ms or'slow'
for 600ms. or type any number like$("element").show(747)
(= 747ms) to define own speed. see the docs and look for animation / duration. -
Kevin Grabher over 9 yearsWith slide effect:
element.slideUp("slow", function(){ element.appendTo(parent).hide(); element.slideDown(); });
-
lilalinux almost 8 yearsI like keeping the hide part out of the template
-
JesuLopez about 6 yearsThe hide and show event applies to the #img_container and not on the first_div, you should use appendTo
-
Grogu over 3 yearsThis is the best answer one line clean and does what it's supposed to.