jQuery淡入事件？

Question

在使用jQuery淡入元素时，是否有可能获得某种事件通知？例如，如果有一个“fadeInEvent”，我会尝试类似这样的操作：

是否可以在元素淡入完成后触发某种事件？

$('elements').delegate('selector', 'fadeInEvent', function() {
    alert('someId has faded in');
});

我知道 jQuery.fadeIn() 有一个回调函数，例如：

$('#someId').fadeIn('fast', function() {
    alert('callback when someId has faded in');
});

但如果可能的话，我更倾向于使用事件解决方案。我还使用了:visible进行了一些原型制作，但它在淡入完成之前返回true。

- matsev

Answer 1

您可以在回调函数中触发自定义事件：

$("#someId").fadeIn("fast", function() {
    $(this).trigger("fadeInComplete");
});

像大多数事件一样，此事件将向上传递DOM树，因此您可以使用on（jQuery 1.7+）、bind或delegate在任何祖先元素上捕获它：

$("#someAncestor").on("fadeInComplete", function() {
    //Element has finished fading in.
});

- James Allardice

---

谢谢，这解决了我的问题。我现在使用bind，因为该项目目前正在使用jQuery 1.6.4。 - matsev

Answer 2

您可以确保在传递给fadeIn方法的每个回调中引发相应的事件，或者您可以猴子补丁现有的jQuery fadeIn方法，以始终在回调中引发fadeInEvent事件。例如：

(function($) {
  var jQueryFadeIn = $.fn.fadeIn;
  var newFadeIn = function(speed, callback) {
    var newCallback = function() {
        if (callback) {
            callback.apply(this, arguments);
        }
        $(this).trigger('fadeInComplete');
    };
    jQueryFadeIn.apply(this, speed, newCallback);
  };
  $.fn.fadeIn = newFadeIn;
})(window.jQuery);

- Rich O'Kelly

---

我遇到了 this.animate is not a function 的问题，似乎在fadeIn替换中没有正确映射。不确定如何解决，请问有什么建议吗？ - Syffys

@Syffys 谢谢，我认为你的编辑解决了这个问题？ - Rich O'Kelly

Answer 3

也许你可以使用Jquery-UI效果并使用回调参数。

- dafi

Answer 4

对我来说，没有任何方法可行，所以我的解决方案是黑进fadeIn函数并运行自定义触发器

var oldFadeIn = $.fn.fadeIn;
$.fn.fadeIn = function(){
    $(this).trigger('fadeInComplete');
    return oldFadeIn.apply( this, arguments );
}

然后只需将其绑定到您需要的任何地方即可

$('.some_element').on('fadeInComplete', function(){
    // do some magic here
});

- KubiQ