jquery animate 回调：完成/完成或 promise().done() 在动画之前开始答案

【问题标题】：jquery animate callback : complete/done or promise().done() starts before animationjquery animate 回调：完成/完成或 promise().done() 在动画之前开始
【发布时间】：2021-02-04 06:04:01
【问题描述】：

我是 jquery 的新手，所以你能帮我解释一下为什么这个命令没有动画吗？动画不工作，并且“字母”在没有动画的情况下返回到之前的位置，所以回调在动画之前触发，如果我没有使用完成或完成 - 动画工作。即使我使用 .animation.promise().done(xxxx) - xxx 在动画之前开始。主要问题是动画后如何制作 .css("position","static") ？

    $("#DestinationLetter0").animate({
      top: 203,
      left: 80
    }, { 
      duration: 4000,
      done: (function(w1, w2) {
        $("#DestinationLetter0").css(w1, w2)
      })("position", "static")
    });

下面提供的示例代码

<html>
   <head>
       <title>AJAX</title>
       <meta charset="utf-8" />
       <script type="text/javascript" src="jquery.js"></script>
       <script type="text/javascript">
            $(document).ready(function(){
               $("#DestinationLetter0").css({position:"absolute"}).animate({top:200,left:200},9000);
               $("#DestinationLetter0").click(function(){$("#DestinationLetter0").animate({
                    top: 50,
                    left: 50
                }, { 
                    duration: 4000,
                    done: (function(w1, w2) {
                        $("#DestinationLetter0").css(w1, w2)
                        })("position", "static")
                    })});
            }) 
        </script>
    </head>
    <body>
        <div><p id="in3"><span id="DestinationLetter0">A</p></div>        
    </body>
</html>```

【问题讨论】：

你看到我的回答@Anton Kotikov 了吗？

标签： javascript jquery promise jquery-animate

【解决方案1】：

告诉我你需要什么

$(document).ready(function(){
 $("#DestinationLetter0").css({position:"absolute"}).animate({top:200,left:200},9000);
 $("#DestinationLetter0").click(function(){
   $(this).animate({
      top: 50,
      left: 50}, {
  }, 4000).promise().done(function () {
       $(this).css("position", "static");
  });
 });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><p id="in3"><span id="DestinationLetter0">A</p></div>

【讨论】：

谢谢，我知道在这种情况下 IIFE 是不可接受的。但我的问题有点复杂， - 我必须向回调发送很多参数，而且我有很多动画要一个接一个地完成。