Question

我需要动态调用jQuery效果（比如'slideDown'，'fadeIn'等），然后我想做一个这样的回调：

$('#elemId').fadeIn(500, function(){
    alert('callback function');
});

例如，我应该如何以这种方式调用回调？

var effect = 'fadeIn'; // or effect = 'slideDown'
var speed = 500;
$('#elemId')[effect](speed);

Answer 1

我认为最干净的解决方案是创建一个包含选择器，效果，速度参数和回调函数的包装函数。

这可能类似于：

function jQueryEffect(selector, effect, speed, callback) {
    switch(effect) {
        case "fadeIn":
            $(selector).fadeIn(speed, callback);
            break;
        // fill in other cases
    }
}

Answer 2

你几乎就在那里，你只需要将回调作为第二个参数传递，就像jQuery FX-Functions想要：http://api.jquery.com/fadeOut/

var aniFx = "fadeOut",
    aniTime = 2000,
    aniCallback = function() { alert("animation done"); };

$("#test")[aniFx](aniTime, aniCallback);

请参阅此小提琴，了解一个工作示例：http://jsfiddle.net/p4s7s/2/

Answer 3

如果您了解所有效果名称，则可以使用if/switch语句：

var effect = 'fadeIn'; 
var speed = 500;

if (effect === "fadeIn")
    $('#elemId').fadeIn(speed);
else {
    $('#elemId').slideDown(speed);
}

您还可以尝试在javascript中调用动态函数名称。查看http://derek.io/blog/2009/dynamic-function-names-in-javascript/

Answer 4

你能做这样的事吗..

var callback = function() {
     console.log('callback');   
}
var dynamic = function(effect,speed, selector, callback) {

    switch(effect) {
        case "fadeIn":
            $(selector).fadeIn(speed, function(){
                callback();
            });
            break;

        case "slideDown":
            $(selector).slideDown(speed, function(){
                callback();
            });
            break;
    }

}

$(function() {
    var effect = 'fadeIn';
    var speed = 1000;

    dynamic(effect,speed,'#test',callback);
});

http://jsfiddle.net/b5Svk/8/

除了mehhhhh之外，还有更好的方法可以做到这一点！

动态jQuery效果

4 个答案: