I'm attempting to create an animation where a div tag moves left 300px, hides after 3 seconds, and then repeats the process every 8 seconds. However, my current code only runs the animation once and doesn't repeat the entire process. Below is the code I am using:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
window.setInterval(function(){
var div=$("div");
div.animate({left:'300px'},"slow");
setTimeout(function(){
div.animate({opacity:'0'},"slow"); }, 3000);
},8000);
});
</script>
</head>
<body>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>