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 in JQuery by Edureka
• 13,640 points
25 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 by Edureka
• 13,640 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,720 points
717 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,720 points
2,998 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,720 points
2,509 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,720 points
3,656 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 in JQuery by gaurav
• 13,460 points
16 views
0 votes
0 answers
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 in JQuery by Edureka
• 13,640 points
22 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 in JQuery by Edureka
• 13,640 points
27 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP