Jquery 函数未在 'tap' 函数事件内部执行

Question

这是我写的函数

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

我的问题是，我需要在 addClass 之后将 #wrapper 的高度更改为 300..

我认为这是正确的语法，但它不会改变 addClass 函数之后的高度。

有什么建议吗？

编辑:

这是一个 JSfiddle: http://jsfiddle.net/TSM_mac/A8T9f/

Answer 1

普通的 jQuery addClass 方法不采用回调函数。在操作完成之前它不会返回，因此您可以安全地将代码放在以下行中:

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

<小时/>

但是，由于您使用的是 jQuery UI，这有点棘手。 The jQuery UI extension to 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动画完成。

<小时/>

如果您使用浏览器的 native 动画功能，我不认为有任何简单的方法可以找出动画何时完成。您需要使用 setTimeout 在指定的时间段后运行代码。

See jsFiddle :

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

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