Javascript 如何使div向下滑动，然后立即返回页面

我试着让一个潜水器滑下，然后在它完成后立即返回。这是我的javascript：

$(document).ready(function(){
    var divtofall = $('.divtofall');
   function fall() {
       divtofall.animate({top:'+=500'}, 10000);
     }
 function gobackup() {
       divtofall.css('top', '0px');
     }

fall();

gobackup();


});

这是我的css：

#div1{ width:200px; height:200px;position:absolute; left:0px; top:0px;}

然而，它只是滑翔而不是回来。我做错了什么

 divtofall.animate({top:'+=500'}, 10000, function(){
   gobackup()
 });

---

试试上面这个。我不认为.css会为您的div设置动画。此外，您可以在完成时通过在末尾添加一个异常函数来调用该函数。animate

当您调用

gobackup（）

时，动画仍然没有完成，那么top属性将被覆盖

相反，将其作为

.animate（）

方法的回调参数调用：

---

之所以会发生这种情况，是因为动画需要一些时间来执行，因此当调用

gobackup（）

时，动画仍然存在。您可以通过以下方式解决：

$(function(){
    var divtofall = $('.divtofall');

    divtofall.animate({top:'+=500'}, 10000, function(){
        //$(this).css('top', 0);
        $(this).animate({ top: 0 }, 5000);
    });

   // divtofall.animate({top:'+=500'}, 10000).animate({ top: 0 }, 5000); works too
});

---

您可以在jquery中链接动画：

---

divtofall.animate（{top:'+=500'}，1000）。animate（{top:'-=500'}，1000）
如果问题不清楚，很抱歉，但我只想让它带着动画滑下来，然后立即回来，不带任何动画。
$(function(){
    var divtofall = $('.divtofall');

    divtofall.animate({top:'+=500'}, 10000, function(){
        //$(this).css('top', 0);
        $(this).animate({ top: 0 }, 5000);
    });

   // divtofall.animate({top:'+=500'}, 10000).animate({ top: 0 }, 5000); works too
});