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

I'm using jQuery 1.5.1 This is my code:

$('.cellcontent').animate({
   left: '-=1开发者_如何学JAVA90'}, {
   easing: alert('start ani'),
   duration: 5000,
   complete: alert('end ani')});

I get both alerts before the animation starts!? I want the complete function to start after the animation has ended. Any thoughts?

---

You need to pass a function to call. Instead you are calling the function.

complete:  function() { alert('end ani'); } 

---

I see two things wrong with this.

One, easing should be:

A string indicating which easing function to use for the transition

And complete should be a function.

http://api.jquery.com/animate

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

---

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.

---

Best solution is this.

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

---

from the jquery docs:

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
   left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});

---

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');
  }
}); 

---

I dont think you need "complete"?

slideToggle(
					"fast","swing", function(){
							// your code here
						}
				);

---

I had the same problem when I had several elements matching the selector. And when I changed the HTML and the code to have only one element, matching the selector, then all was fine.

---

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