JSFiddle - React, Tailwind, and code Playground

by danheberden

HTML

<div class="UIDivTest"></div>
<div class="UIButton"><input type="button" id="startButton" value="startTest"/></div>

CSS

.UIDivTest{
    position:absolute;
    top:50%;
    left:50%;
    background:black;
    height:100px;
    width:100px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;   
}
.UIButton{
    float:right;
    display:inline;
    margin-top:30px;
    padding:10px;
    background:blue;   
}

JavaScript

$(document).ready(function(){
    $('#startButton').click(buttonOnClick);
});

function buttonOnClick(){
    var elem=$('.UIDivTest');
    function fcOnBottomRightPositionCompleted(){
        alert('end of animation. Div is not positionning at the bottom right corner as expected.');
    }
    function fcOnTopLeftPositionCompleted(){
        alert('second animation : positionning div from bottom and right');
        //positionning div from bottom and right
        //this is where the top and left value should be resetted, I tried auto,null,empty string, undefined... but still doesnot works as expected
        elem
           .css({top: 'auto', left: 'auto'})
           .animate({'bottom':0,'right':0},
                    {'complete':fcOnBottomRightPositionCompleted});   
    }
    alert('first animation : positionning div from top and left');
    //positionning div from top and left
    elem
      .animate({'top':0,'left':0,'bottom':'','right':''},
               {'complete':fcOnTopLeftPositionCompleted});
}