jQuery using append with effects

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?

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

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

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

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.

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

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

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

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

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>

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>

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

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;