jQuery using append with effects

Question

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?

Matt Ball · Accepted Answer · 2013-01-08T00:43:35.407

199

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

edited Jan 08 '13 at 00:43

answered Oct 05 '09 at 14:13

Matt Ball

332,322
92
617
683

5

was probably the inline style, adding a css class like "hidden" which equates to display: none is .. "classier" (baddoom tsh) ;) – dmp Jun 22 '10 at 15:09
2

This 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. – Vic Jan 08 '13 at 00:35
1

@Vic as it happens `.append()` doesn't even take a selector string. The idea's still correct though. Thanks, updated. – Matt Ball Jan 08 '13 at 00:39
The 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... – Drew Dello Stritto Jan 23 '13 at 06:50

Derek Illchuk · Answer 2 · 2009-12-04T18:38:14.380

126

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

edited Dec 04 '09 at 18:38

answered Dec 04 '09 at 14:54

Derek Illchuk

5,472
1
26
29

2

I've tried both of these ways and it doesn't work. There is no smooth sliding effect on the appended content. – Chris22 Nov 05 '13 at 08:51
`'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](https://api.jquery.com/show/) and look for animation / duration. – honk31 Jul 09 '14 at 08:59
2

With slide effect: `element.slideUp("slow", function(){ element.appendTo(parent).hide(); element.slideDown(); });` – Kevin Grabher Mar 13 '15 at 19:07
I like keeping the hide part out of the template – lilalinux Jul 13 '16 at 16:06

score 24 · Answer 3 · answered Mar 29 '11 at 21:04

24

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

answered Mar 29 '11 at 21:04

naspinski

32,338
34
100
151

Mark Bell · Answer 4 · 2009-10-05T14:14:40.363

17

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.

edited Oct 05 '09 at 14:14

answered Oct 05 '09 at 13:51

Mark Bell

27,184
22
109
138

1

Not sure if that would do what he wants, but if so, you'd chain the functions: `$('#divid').append('#newdiv').hide().show('slow')`. – Matt Ball Oct 05 '09 at 14:07
It does work; the #newdiv bit is wrong though and you're right, you can chain them. I've edited my answer now. – Mark Bell Oct 05 '09 at 14:15
This is the best answer one line clean and does what it's supposed to. – Grogu Jan 14 '21 at 01:16

score 8 · Answer 5 · edited Jul 04 '16 at 09:06

8

When you append to the div, hide it and show it with the argument "slow".

$("#img_container").append(first_div).hide().show('slow');

edited Jul 04 '16 at 09:06

Shubham Khatri

211,155
45
305
318

answered Jan 28 '15 at 06:30

The hide and show event applies to the #img_container and not on the first_div, you should use appendTo – JesuLopez May 15 '18 at 07:47

score 4 · Answer 6 · edited Jul 18 '12 at 18:46

4

Set the appended div to be hidden initially through css visibility:hidden.

edited Jul 18 '12 at 18:46

Community

1
1

answered Oct 05 '09 at 13:50

Steerpike

15,129
7
37
53

score 3 · Answer 7 · answered Jul 26 '12 at 01:27

I was in need of a similar kind of solution, wanted to add data on a wall like facebook, when posted,use prepend() to add the latest post on top, thought might be useful for others..

$("#statusupdate").submit( function () {    
          $.post(
           'ajax.php',
            $(this).serialize(),
            function(data){

                $("#box").prepend($(data).fadeIn('slow'));                  
                $("#status").val('');
            }
          );
           event.preventDefault();   
        });

the code in ajax.php is

if (isset($_POST))
{

    $feed = $_POST['feed'];
    echo "<p id=\"result\" style=\"width:200px;height:50px;background-color:lightgray;display:none;\">$feed</p>";


}

score 1 · Answer 8 · answered May 21 '14 at 23:17

Why don't you simply hide, append, then show, like this:

<div id="parent1" style="  width: 300px; height: 300px; background-color: yellow;">
    <div id="child" style=" width: 100px; height: 100px; background-color: red;"></div>
</div>


<div id="parent2" style="  width: 300px; height: 300px; background-color: green;">
</div>

<input id="mybutton" type="button" value="move">

<script>
    $("#mybutton").click(function(){
        $('#child').hide(1000, function(){
            $('#parent2').append($('#child'));
            $('#child').show(1000);
        });

    });
</script>

score 0 · Answer 9 · answered May 06 '15 at 08:24

0

It is possible to show smooth if you use Animation. In style just add "animation: show 1s" and the whole appearance discribe in keyframes.

answered May 06 '15 at 08:24

NeedHate

449
5
21

score 0 · Answer 10 · answered Aug 19 '15 at 11:03

In my case:

$("div.which-stores-content").append("<div class="content">Content</div>);
$("div.content").hide().show("fast");

you can adjust your css with visibility:hidden -> visibility:visible and adjust the transitions etc transition: visibility 1.0s;

score 0 · Answer 11 · edited Apr 19 '21 at 09:05

I had this exact need in my final project where I appended the element with style display: none; and added an id to it. In the second line of JQuery, I added $('#myid').show('slow');.

$(document).on('click','#trigger',function(){
  $('#container').append("<label id='newLabel' style='display:none;' class='btn btn-light'>New Element</label>");
  $('#newLabel').show('slow');
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="container" class="btn-group">
  <label class="btn btn-light">Old element</label>
</div>
<button id="trigger" class="btn btn-info">Click to see effect</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery using append with effects

11 Answers11

Linked