JSFiddle - React, Tailwind, and code Playground
HTML
<input type="button" id="btnStart" value="START">
<div id="elemento" style="border:1px solid #000; width:180px; height:80px;"></div>
CSS
body{ font-family: arial; }
#elemento{ position: absolute; top: 0; left: 0; background-color: #FF0000; color: #FFF; }
#btnStart{ margin-top: 80px; }
JavaScript
$(function() {
$("#btnStart").click(function(){
// largura da tela
var larguraTela = $(window).width();
// altura da tela
var alturaTela = $(document).height();
// largura do quadrado + borda direita e esquerda
var larguraElem = 180+2; // 2 refere-se a borda
// altura do quadrado + borda superior e inferior
var alturaElem = 80+2; // 2 refere-se a borda
$("#elemento").html("para esquerda...").animate({
// move para direita
marginLeft: (larguraTela - larguraElem)+"px"
},
2000,
function() {
$(this).html("descendo...").animate({
// move para baixo
marginTop: (alturaTela - alturaElem)+"px"
},
2000,
function(){
$(this).html("direita vou ver...").animate({
// move para esquerda
marginLeft: "0px"
},
2000,
function(){
$(this).html("subindo...").animate({
// move para cima
marginTop: "0px"
},
8999000,
function(){
$(this).html("CHEGAMOS!!!");
});
});
});
});
});
});