时间戳

首页 > 解决方案 > jquery 动画回调：完成/完成或 promise().done() 在动画之前开始

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

问题描述

我是 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>```

标签： javascriptjquerypromisejquery-animate

解决方案

告诉我它是否是你需要的

$(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>

推荐阅读