有没有办法将命令绑定到 fadeIn 事件而不必 .trigger('fadeIn')？

Question

我有一个交互式表单系统，该系统具有不同的模块，其中每个模块的表单都包含在不同的div元素中。 当我从一个模块切换到另一个模块时，我经常这样做：

$('#module_1').hide();
$('#module_2').fadeIn();

我喜欢这个，但是现在，在开发了这个系统一段时间之后，我有一些功能（如重新初始化jqgrid），我想在每次发生fadeIn时发生。 我像这样设置：

$('#module_2').bind('fadeIn',function(){
    initialize_jqgrid();
});

有没有办法让我对所有$('#module_2').fadeIn();实例都工作，而不必去每个实例并用这个替换它？

$('#module_2').fadeIn().trigger('fadeIn');

这背后的动机只是为了拥有更干净的代码，$('#module_2').fadeIn().trigger('fadeIn');有点多余。

多谢！

Answer 1

当然，

var _old = $.fn.fadeIn;
$.fn.fadeIn = function(){
    var self = this;
    return _old.apply(this,arguments).promise().done(function(){
        self.trigger("fadeIn");
    });
};
// and your code: // replace .bind with .on if jQuery 1.7+
​$("div").bind("fadeIn",function(){alert("worky");});
$("div").fadeIn(2000);​​​​​​​​​​​​​​​​​

演示
http://jsfiddle.net/gEVsX/2/

更新以征求意见

var _old = $.fn.fadeIn;
$.fn.fadeIn = function(){
    return _old.apply(this,arguments).trigger("fadeIn");
};
// and your code: // replace .bind with .on if jQuery 1.7+
​$("div").bind("fadeIn",function(){alert("worky");});
$("div").fadeIn(2000);​​​​​​​​​​​​​​​​​

Answer 2

您可以定义回调函数并将其用作 fadeIn（） 的参数。

function callback(){
    initialize_jqgrid();
}
$('div#module_2').fadeIn(duration,callback)

Answer 3

简单函数：

switch_module('div#module_1','div#module_2');

function switch_module(old_selector, new_selector){
    $(old_selector).hide();
    initialize_jqgrid();
    $(new_selector).fadeIn();
}

Answer 4

您可以使用回调函数$('div#module_2').fadeIn(500, initialize_jqgrid);

并将所有内容放入具有泛型选择器调用的函数中;

function fadeModule(selector)
{
    $(selector).fadeIn(500, initialize_jqgrid);
}

并这样称呼它fadeModule('div#module_2');

编辑：500是淡入的默认持续时间，放任何你想要的。