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.