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

我正在尝试使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;}

但是，它只是向下滑动而不会重新上升。我究竟做错了什么？

最佳答案

当您调用gobackup()时，动画仍未完成，那么top属性将被覆盖。

而是将其作为.animate()方法的回调参数调用：

JsFiddle Example

$(document).ready(function(){
    var divtofall = $('.divtofall');
    function gobackup() {
        divtofall.css('top', '0px');
    }

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

    fall();
});