How can I use .append() with effects like show('slow')
Having effects on append doesn't seem to work at all, and it give the same result as normal show() . No transitions, no animations.
How can I append one div to another, and have a slideDown or show('slow') effect on it?
Source: Tips4all
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:
ReplyDeleteStyle 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:
$('#original_div').append('#new_div').show('slow');
The essence is this:
ReplyDeleteYou'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');
Set the appended div to be hidden initially through css display:hidden.
ReplyDeleteSomething like:
ReplyDelete$('#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.
Another way when working with incoming data (like from an ajax call):
ReplyDeletevar new_div = $(data).hide();
$('#old_div').append(new_div);
new_div.slideDown();