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?

Hopson

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

Downy

was probably the inline style, adding a css class like "hidden" which equates to display: none is .. "classier" (baddoom tsh) ;) – Ivonne

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. – Aurel

@Aurel as it happens .append() doesn't even take a selector string. The idea's still correct though. Thanks, updated. – Downy

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... – Vanpelt

Answer 2

The essence is this:

1. You're calling 'append' on the parent
2. 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');

Piefer

I've tried both of these ways and it doesn't work. There is no smooth sliding effect on the appended content. – Corney

'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. – Treasury

With slide effect: element.slideUp("slow", function(){ element.appendTo(parent).hide(); element.slideDown(); }); – Leakey

I like keeping the hide part out of the template – Baxie

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

Obscurant

Answer 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.

Palish

Not sure if that would do what he wants, but if so, you'd chain the functions: $('#divid').append('#newdiv').hide().show('slow'). – Downy

It does work; the #newdiv bit is wrong though and you're right, you can chain them. I've edited my answer now. – Palish

This is the best answer one line clean and does what it's supposed to. – Citify

Answer 5

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

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

Belittle

The hide and show event applies to the #img_container and not on the first_div, you should use appendTo – Slovakia

Answer 6

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

Behnken

Answer 7

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>";


}

Maxima

Answer 8

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>

Impersonality

Answer 9

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>

Welloff

Answer 10

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

Soandso

Answer 11

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;

Baines