Question

Here is the function I have written

$('#move').bind('tap', function () {
    $('.page').addClass('slideLeftOut', function () {
    $('#wrapper').css("height","300");
    }); 
}); 

My problem is, I need the #wrapper’s height to change to 300 AFTER the addClass..

I thought that this was the correct syntax for this, but it does not change the height after the addClass function.

Any Advice?

EDIT:

Here is a JSfiddle:
http://jsfiddle.net/TSM_mac/A8T9f/

Answer 1

The normal jQuery addClass method does not take a callback function. It does not return until the operation is complete, so you can safely put the code on the following line:

$('#move').bind('tap', function () {
    $('.page').addClass('slideLeftOut');
    $('#wrapper').css("height","300");
});

---

Since you are using jQuery UI, however, this is a little trickier. The jQuery UI extension to addClass does not provide a callback argument.

Since the UI addClass method uses animate internally, you could use the jQuery 1.6 $.Deferred enhancement, which allows you to call functions when all animations on an element are complete. This is easy to implement with promise:

$('#move').bind('tap', function () {
    $('.page').addClass('slideLeftOut').promise().done(function() {;
        $('#wrapper').css("height","300");
    });
});

See:

• $.Deferred
• $.fn.promise
• deferred.done

Note that this will only run when all animations are complete, not just the addClass one.

---

If you are using a browser’s native animation capacity, I don’t believe there is any easy way of finding out when an animation is finished. You’ll need to do use setTimeout to run the code after a specified period of time.

See jsFiddle:

$('.page').addClass('slideLeftOut');

setTimeout(function() {
    $('#wrapper').css("height","300");
}, 500);