JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="mydiv"></div>
<p id="test">Hi welcome...!!</p>
CSS
#mydiv {
width:40px;
height:40px;
position:absolute;
left:0;
background: black;
}
#test {
visibility: hidden;
position:absolute;
left:0;
top:50;
}
JavaScript
var width = $(document).width() - $('#mydiv').width();
$(document).ready(function() {
function animateMydiv() {
$('#mydiv').animate({'left': width + 'px'}, 9000, function(){
$('#test').css({opacity:1.0, visibility:"visible"}, 9000).animate({opacity: 0}, 9000);
}).animate({'left': '0px'}, 9000, animateMydiv);
}
animateMydiv();
});