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.
$(function () {
var html = "<div id='str'>Hello</div>";
$('#btn').click(function () {
$('#cont').append(html);
});
});<button id='btn'>click</button>
<div id='cont'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>try this:
$(function () {
$('#str').hide();
var html = "";
$('#btn').click(function () {
$('#str').toggle(1000);
});
});<button id='btn'>click</button>
<div id='cont'></div>
<div style="display:none" id='str'>Hello</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>If you really are desperate about the adding HTML
$(function () {
$('#str').hide();
var html = "";
$('#btn').click(function () {
$('str').innerHTML ="Hello"
$('#str').toggle(1000);
if($('str').style.display=="none"){
$('str').innerHTML =""
}
});
});<button id='btn'>click</button>
<div id='cont'></div>
<div style="display:none" id='str'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>