Jquery 函数未在“点击”函数事件中执行答案

【问题标题】：Jquery function not executing inside of a 'tap' function eventJquery 函数未在“点击”函数事件中执行
【发布时间】：2011-06-05 23:10:02
【问题描述】：

这是我写的函数

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

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

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

有什么建议吗？

编辑：

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

【问题讨论】：

标签： jquery jquery-ui jquery-selectors

【解决方案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);

【讨论】：

似乎无法解决问题：/。我会上传到 jsFiddle
我已经添加了上面的 JSfiddle，我将#wrapper 背景设置为红色，以便您可以看到它。如果在 slideLeftOut 动画期间红色背景可见而不是在完成后可见，则应该成功
我使用 webkit 动画而不是 jquery 的原因是因为 iOS 对 webkit 动画使用硬件加速。它运行非常流畅
@TaylorMac 原生动画是问题所在。查看我的编辑。
setTimeout 函数的使用非常酷。太好了，非常感谢

【解决方案2】：

如果你这样做会发生什么？

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

我看不到具有此签名的方法：addClass('slideLeftOut', function () {

欲了解更多信息，请查看此处：http://api.jquery.com/addClass/

【讨论】：

:/它仍然在添加类'slideLeftOut'并同时改变#wrapper的高度