JSFiddle - React, Tailwind, and code Playground

by blackjid

HTML

<div id="original">
    <div class="square animate"></div>
</div>

<button class="duplicate timeout">duplicate with setTimeout</button>
<button class="duplicate notimeout">duplicate without setTimeout</button>

CSS

.animate{
    -webkit-transition: all 1s ease-in;
}
.square{
    width:50px;
    height:50px;
    background:red;
    position:relative;
    left:5px;
}

JavaScript

$(".duplicate").live("click", function(e) {
    var $to = $("#original .square").clone()
    $("body").append($to);
    if ($(e.target).hasClass("timeout"))
    //With setTimeout it work
    setTimeout(function() {
        $to.css("left", 200 + "px");
    }, 0);
    else if ($(e.target).hasClass("notimeout"))
    // These way it doesn't work
    $to.css("left", 200 + "px");
});