4

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

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

我喜欢这个,但是现在,在开发这个系统一段时间后,我有一些功能(比如重新初始化一个 jqgrid),我希望每次 a发生时都fadeIn发生。我这样设置:

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

有没有一种方法可以使所有实例都可以使用,$('#module_2').fadeIn();而不必去每个实例并用它替换它?

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

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

非常感谢!

4

4 回答 4

11

当然,

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);​​​​​​​​​​​​​​​​​
于 2012-04-26T15:24:58.730 回答
1

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

function callback(){
    initialize_jqgrid();
}

$('div#module_2').fadeIn(duration,callback)
于 2012-04-26T15:25:19.783 回答
0

简单功能:

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


function switch_module(old_selector, new_selector){
    $(old_selector).hide();
    initialize_jqgrid();
    $(new_selector).fadeIn();
}
于 2012-04-26T15:25:16.567 回答
0

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

并通过通用选择器调用将所有内容放入函数中;

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

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

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

于 2012-04-26T15:27:58.873 回答