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?
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>