jquery animate callback complete done or promise done starts before animation

Question

I am a new in jquery so can you help me why this command doesnt animate? Animation not working, and "letter" returns in previous position without animation, so callback fires before animation, and if i am not using done or complete - animation works. Even if i use .animation.promise().done(xxxx) - xxx starts before animation. Main question is how make .css("position","static") after animation?

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

Example code provided below

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

Edureka · Answer 1 · Jun 1, 2022

Tell me if its what you need

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

answered Jun 1, 2022 by Edureka
• 13,670 points

jquery animate callback complete done or promise done starts before animation

Your comment on this question:

1 answer to this question.

Your answer

Your comment on this answer:

Related Questions In JQuery

How to attach callback to jquery effect on dialog show?

How to refresh a jQuery UI Slider after setting min or max values?

How to scroll to element from bottom to top with a nice animation using Jquery?

How do I check if file exists in jQuery or pure JavaScript?

Listening for Youtube Event in JavaScript or jQuery

How do I assign jQuery slider handle values with their left or right edges, instead of their centers?

How do I assign jQuery slider handle values with their left or right edges, instead of their centers?

How can I create a "Please Wait, Loading..." animation using jQuery?

Why does jQuery or a DOM method such as getElementById not find the element?

How do I assign jQuery slider handle values with their left or right edges, instead of their centers?

Subscribe to our Newsletter, and get personalized recommendations.

TRENDING CERTIFICATION COURSES

TRENDING MASTERS COURSES

COMPANY

WORK WITH US

DOWNLOAD APP

CATEGORIES

CATEGORIES

TRENDING BLOG ARTICLES

TRENDING BLOG ARTICLES