jQuery Custom Callback for .animate()

Question

I'm trying to create a custom callback for the jQuery .animate() function. I'm limited to jQuery 1.4.2 and based my custom call on this [article by Dan Switzer][1]

(function ($){
    var oldAnimate = $.fn.animate;
    $.fn.animate = function(){
        this.trigger('animate.before', arguments);
        var animateResult = oldAnimate.apply(this, arguments);
        this.trigger('animate.after', arguments);
        return animateResult;
    };
})(jQuery || {});

$('#ID').bind('animate.after', function (){ 
    //Do Something
});

However when I run this code, my '//Do Something' does not trigger. I also tried following [Dave Ward's article][1] as well, using this:

var oldAnimate = jQuery.animate;

jQuery.animate = function() {
    if (typeof animate.before === 'function')
    animate.before.apply(this, arguments);
    var animateResult = oldAnimate.apply(this, arguments);
    if (typeof animate.after === 'function')
    animate.after.apply(this, arguments);
    return animateResult;
};

I'm not sure where I'm going wrong.

Answer 1

Ok, so you've found that your code doesn't work. Step one would be to simplify it and test the parts of it separately. Lets start with the event.

$("#ID").bind("animate.before animate.after",function(e){
   console.log(e.type); 
}).trigger("animate.before").trigger("animate.after");

This results in two events triggered with type equal to "animate" both times. To make it say animatebefore and animate after, replace the . with :

$("#ID").bind("animate:before animate:after",function(e){
   console.log(e.type); 
}).trigger("animate:before").trigger("animate:after");

Now we properly get animate:before and animate:after . Now that we know our event is working, lets tie that into the animate method.

$("#ID").bind("animate:before animate:after",function(e){
   console.log(e.type); 
});

var oldanim = $.fn.animate;
$.fn.animate = function() {
    this.trigger("animate:before");
    oldanim.apply(this,arguments);
    this.trigger("animate:after");
};

$("#ID").animate({"width":"200px"},2000,function(){
    console.log("animation complete");
});

It works!!! however, you'll notice pretty quickly that the after event is happing way later than it should be. This is because the animate method performs in an asynchronous way using setTimeouts, therefore the code continues to run. I don't have any suggestions for you yet as far as how to fix that due to the fact that we don't have deferred objects until 1.5. You could override the complete function, but you'd have to take into account that it can be attached in two different ways.

Answer 2

How about the complete option? I guess this was available in jQuery 1.4.1

$('#id').animate({
    properties..
}, {
    complete: function() {
        // doStuff
    }
});