animate's callback function (complete) executed at start?

Question

I\'m using jQuery 1.5.1 This is my code:

$(\'.cellcontent\').animate({
   left: \'-=190\'}, {
   easing: alert(\'start ani\'),
   duration: 5000,
   complete         


        

Answer 1

You need to pass a function to complete.

Try this:

$('.cellcontent').animate({
    left: '-=190'}, {
    easing: alert('start ani'),
    duration: 5000,
    complete: function() { alert('end ani') }
});

Since complete expects a function, it executes the code you pass to it to get a function object that it can call back to when finished.

Answer 2

declare them in a function first, otherwise the method is called instantly:

var onComplete = function () {
    alert('end ani');
};

then call them without the ()

$('.cellcontent').animate({
    left: '-=190'}, {
    easing:  'slow', 
    duration: 5000,
    complete: onComplete //<-- function is passed as a variable, not called directly
 });

or wrap them directly into a function (less readable and slower when calling this a lot):

$('.cellcontent').animate({
  left: '-=190'}, {
  easing:  'slow',
  duration: 5000,
  complete:  function () {
        alert('end ani');
  }
});