Question

这是我写的函数

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

我的问题是，我需要#packper的高度在addClass之后改为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");
    });
});

请参阅：

请注意，这只会在所有动画完成时运行，而不仅仅是addClass动画。

如果您使用浏览器的原生动画容量，我不相信有任何简单的方法可以找到动画完成的时间。您需要在指定的时间段后使用setTimeout来运行代码。

See 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/

Jquery函数不在'tap'函数事件中执行

2 个答案: