Question

I need to make this function

$.when(
    self.image.fadeOut(self.options.animationSpeed),
    self.aniImg.eq(0).fadeIn(self.options.animationSpeed)
).done(function () {
    self.finishAnimating(data);
});

into a function that is compatible with jquery 1.5.

I have been trying, but can’t get it to work. can anyone help me please ?

@Edit: I did a setup here http://jsfiddle.net/u4hWf/. As you can see, with jquery 1.5.2 strange visual things happen, which don’t with jquery 1.6.x If someone could take a look that would be awesome

Answer 1

You aren’t going to make anything as beautiful as the code with the Deferred style. I’d strongly urge you to look at upgrading the version of jQuery.

This code simply runs one bit of code once two asynchronous bits of code are complete. Given that they have the same duration given, you could simply delay the code by that amount of time:

self.image.fadeOut(self.options.animationSpeed);
self.aniImg.eq(0).fadeIn(self.options.animationSpeed);
setTimeout(function() {
    self.finishAnimating(data);
}, self.options.animationSpeed);

This is the quick and (slightly) hackish approach. Another would be to run a function that only executes a bit of code when the correct number of functions have completed.

var ticks = 0;

function tick() {
    if (++ticks === 2) { // number of animations
        self.finishAnimating(data);
    }
}

self.image.fadeOut(self.options.animationSpeed, tick);
self.aniImg.eq(0).fadeIn(self.options.animationSpeed, tick);

This is more verbose, and again not very pretty, but it more precisely replicates the $.when behaviour, and is more extensible.