JSFiddle - React, Tailwind, and code Playground

by Dineshkani

HTML

<div id="firstdiv" class="sample">
         Hello Jquery
</div>
<input type="button" value="animate" />
<input type="button" value="stopinstant" />
<input type="button" value="finish" />

CSS

.sample{
    width: 200px;
    height: 200px;
    color: white;
    background-color: grey;
    position:relative;
}

JavaScript

$("input[value='animate']").on("click",function(){
    $("#firstdiv").animate({"left":"50px","height":"300px","width":"300px"},5000,function(){
        //I am callback function execute after animation finished.
        alert("finished");
    })
});
$("input[value='stopinstant']").on("click",function(){
    $("#firstdiv").stop();
});
$("input[value='finish']").on("click",function(){
    $("#firstdiv").stop(true,true);
});