javascript - 如何让div向下滑动然后立即回到页面

Question

我正在尝试让一个 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;}

然而，它只是滑落而不会回升。我做错了什么？

Answer 1

当你调用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();
});