Функция Jquery не выполняется внутри события функции «tap»

Question

Вот функция, которую я написал

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

Моя проблема в том, что мне нужно, чтобы высота # оболочки была изменена на 300 ПОСЛЕ addClass ..

Я думал, что это правильный синтаксис для этого, но он не меняет высоту после функции addClass.

Любой совет?

РЕДАКТИРОВАТЬ:

Вот JSfiddle: http://jsfiddle.net/TSM_mac/A8T9f/

Answer 1

Обычный метод jQuery addClass не принимает функцию обратного вызова. Он не вернется, пока операция не будет завершена, поэтому вы можете смело поместить код в следующую строку:

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

---

Однако, поскольку вы используете пользовательский интерфейс jQuery, это немного сложнее. Расширение пользовательского интерфейса jQuery до addClass не предоставляет аргумент обратного вызова.

Поскольку метод UI addClass использует внутренне animate, вы можете использовать расширение jQuery 1.6 $.Deferred, которое позволяет вам вызывать функции, когда все анимации элемента завершены. Это легко реализовать с помощью promise:

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

См:

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

Обратите внимание, что это будет выполняться только тогда, когда все анимации завершены, а не только addClass.

---

Если вы используете встроенную анимацию браузера, я не верю, что есть какой-либо простой способ узнать, когда анимация закончена. Вам нужно будет использовать setTimeout для запуска кода через определенный промежуток времени.

См. JsFiddle :

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

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

Answer 2

Что произойдет, если вы сделаете это?

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

Я не вижу метода с такой подписью: addClass('slideLeftOut', function () {

Для получения дополнительной информации, посмотрите здесь: http://api.jquery.com/addClass/