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()时，动画仍未完成，则顶级属性将被覆盖。

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

JsFiddle Example

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

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

    fall();
});

Answer 2

这是因为动画需要一些时间才能执行，所以当调用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
});

Check jsFiddle

Answer 3

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

尝试以上操作。我不认为.css会激活你的div。此外，您可以在完成后通过在.animate

的末尾添加一个anoymous函数来调用该函数

Answer 4

你可以在jquery中链接动画：

divtofall.animate({top:'+=500'}, 1000).animate({top:'-=500'}, 1000);

如何使div滑下然后立即返回页面

4 个答案: