jquery animate callback complete done or promise done starts before animation

0 votes

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

Jun 1, 2022 in JQuery by Edureka
• 13,670 points
1,472 views

1 answer to this question.

0 votes

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

Related Questions In JQuery

0 votes
1 answer

How to attach callback to jquery effect on dialog show?

Hello, Try out the code using jQuery Promise object: $("#dialog").dialog({ ...READ MORE

answered May 30, 2020 in JQuery by Niroj
• 82,880 points
1,761 views
0 votes
1 answer

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

Hello @kartik, You should try doing something like ...READ MORE

answered May 30, 2020 in JQuery by Niroj
• 82,880 points
4,863 views
0 votes
1 answer

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

Hello @kartik, Assuming you have a button with ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,880 points
3,739 views
0 votes
1 answer

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

Hello @kartik, With jQuery: $.ajax({ url:'http://www.example.com/somefile.ext', ...READ MORE

answered Oct 5, 2020 in JQuery by Niroj
• 82,880 points
5,867 views
0 votes
1 answer

Listening for Youtube Event in JavaScript or jQuery

I'm trying to get the onStateChange event ...READ MORE

answered May 30, 2022 in JQuery by gaurav
• 23,260 points
1,906 views
0 votes
0 answers
0 votes
1 answer
0 votes
1 answer

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

Use the ajaxStart() and ajaxStop() Method While working ...READ MORE

answered Jun 7, 2022 in JQuery by Edureka
• 13,670 points
1,374 views
0 votes
1 answer

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

At the moment the script is executed, ...READ MORE

answered Jun 1, 2022 in JQuery by Edureka
• 13,670 points
1,453 views
0 votes
1 answer
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP