animate div after crossing the bottom of window to start over from top

0
votes

I'm trying to make a infinite animation on page load when the top of the div styled like square has crossed the bottom of window to start his position again from top. My code makes the div moving +50px from top to bottom every 1 sec but I cant solve the issue to start over again from top after it cross the bottom of my screen. Any help would be great.

p.s: sry for my bad english.

$(document).ready(function(){
setInterval(function(){
$("#john").animate({top:'+=50px'},1000)
},1000);
if($("#john").offset().top > $(window).height()){
$("#john").animate({top:'0px'})
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='john' style="position: relative; background-color:orange; width:60px; height:60px">title</div>
1
jqueryhtmlcss

1 Answers

0
votes

$(document).ready(function(){
  setInterval(function(){

    if($("#john").offset().top > $(window).height()){
      $("#john").animate({top:'0px'})
    }
    
    $("#john").animate({top:'+=50px'},1000)
    },1000);  
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='john' style="position: relative; background-color:orange; width:60px; height:60px">title</div>