<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.box{
width: 100px;
height: 100px;
background: pink;
position: absolute;
top:0;
left: 0;
}
</style>
<body>
<div class="box">
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$('.box').click(function () {
$('.box').animate({'top':500,'left':500}).delay(100).
animate({'top':470,'left':470},100).animate({'top':500,'left':500},100).
animate({'top':480,'left':480},100).animate({'top':500,'left':500},100).
animate({'top':490,'left':490},100).animate({'top':500,'left':500},100).
animate({'queue':true},function () {
$(this).css({'transition': 'all 1s','transform':'rotate(180deg)'});
}).queue(function (next) {
$(this).css({'background': '#f60'});
next()
}).animate({'opacity':0.3})
})
</script>
</body>
</html>
