跨越窗口底部以从顶部重新开始后为 div 设置动画答案

【问题标题】：animate div after crossing the bottom of window to start over from top跨越窗口底部以从顶部重新开始后为 div 设置动画
【发布时间】：2015-02-17 04:24:39
【问题描述】：

当方形样式的 div 顶部越过窗口底部以再次从顶部开始位置时，我正在尝试在页面加载时制作无限动画。我的代码使 div 每 1 秒从上到下移动 +50px，但我无法解决问题，在它穿过我的屏幕底部后从顶部重新开始。任何帮助都会很棒。

ps：对不起我的英语不好。

$(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>

【问题讨论】：

标签： jquery html css

【解决方案1】：

$(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>

【讨论】：

大声笑我无法相信我犯了这个简单的错误。非常感谢！