Question

一旦toggleClass完成，我怎么能做一个功能？我尝试过以下但没有运气：

$("#loader").toggleClass('fadeOut', function () {
    alert('a');
});

Answer 1

jQuery有一个promise方法，它返回一个promise，该promise在所选元素的所有运行动画完成后解析。此时，您可以绑定到它的完成方法。

$("#loader").toggleClass('fadeOut',600).promise().done(function(){
    console.log('a');
});

http://jsfiddle.net/skram/4x76J/

注意：使用toggleClass的动画需要jQuery UI。

Answer 2

toggleClass会立即执行，因此您不需要toggleClass的回调，只需将alert('a')放入下一行，该行将在toggleClass执行后发出警报

编辑：看起来你想要jQuery UI效果 - toggleClass但遗憾的是它没有回调功能。

也许您应该编写自己的切换功能。请参阅下面的fadeIn / fadeOut切换，

var $loader = $("#loader");
if ($loader.is(':visible')) {
  $loader.fadeOut(100, function () {
      alert('fade out complete');
  });
} else {
  $loader.fadeIn(100, function () {
      alert('fadeIn complete');
  });
}

Answer 3

    $("#loader").stop().fadeTo(400,0, function() {
        $(this).toggleClass('fadeOut').hide(); // exec after is faded out.
        alert(' ta-da!');
    });

Answer 4

我用其他方法来处理这个问题。在此示例中，我合并了.delay()函数和.queue()

$(this).toggleClass("focus_out").delay(500).queue(function(custom_call_back) {
    $(this).removeClass('focus_out');
    custom_call_back();
});

在您的情况下$(this)可能是$('#loader')

jQuery：.delay(); queue();

toggleClass上的jquery函数完成了吗？

4 个答案: