Home/ Questions/Q 463819
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T23:12:47+00:00

It looks like callback function is executed right after animate is called, not at

  • 0

It looks like callback function is executed right after animate is called, not at the end of the duration which that animate is set to. And it looks like it does not matter where the function is executed within or referenced.

is there a way to specify to fire up callback function at the end of duration, or i need to initiate a timer which would be set to the same value as the duration of the animation?

another thing, hypothetically, i would like same function to animate either fade in or fade out depending on css property value, the only thing that holds the entire idea smoothly going through is the fact that i can not invoke same animate on the element while animate is running. Any way to stop execution of the animate?

So far nothing in documentation, wondering if anyone had same problem and how you solved it.

Thank you in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Sorry, but your looks like statements are false: the callback executes only after the event is completed.

    From the jQuery documentation for the callback parameter:

    A function to be executed whenever the animation completes, executes once for each element animated against.

    Source

    Try the following code on your computer. If this doesn’t convince you that the docs are right, then I don’t know what will.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>jQuery Animate, Callback Test</title>
  </head>
  <body>
    <script type="text/javascript"
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        $('<div id="mytest">Incoming!</div>')
          .appendTo(document.body)
          .css('font-size', '14px')
          .animate({ fontSize: '42px' }, 1500, 'linear', function() {
            $(this).text('Boom!').css('color', 'red');
          });
      });
    </script>
  </body>
</html>

    The text will get bigger, then say “boom!” and turn red when the animation is complete.

    The animation will proceed without stopping by default because there is a queue. A queue is simply a list of pending animations that jQuery cycles through until it is empty. To forgo the queue, you need to use one of the overloaded versions of animate:

    $(this).animate({
  opacity: 1.0,
  width: '234px'
}, {
  queue: false, // This skips the queue
  duration: 'fast',
  complete: function() { alert('the callback'); } // Your callback goes here...
});

    Also, named functions must be passed without the parenthesis (the surrounding curly marks of this fragment) or else the function will be executed.

    var temp = myFunc(); // gets called and the result is assigned...
var temp = myFunc;   // but this doesn't get called, and the function is passed.
    • 0