Question

我编写了一个自定义jquery函数，它接受一个回调，但是当动画函数执行结束时，无法理解回调函数将如何在调用环境中执行。

这是我的自定义功能代码

jQuery.fn.busyToggle = function (flag, marginBottom, opacity, speed, easing, callback) {
        if (flag == 1) {
            return this.stop(true).animate({ marginBottom: marginBottom, opacity: opacity }, { queue: false, duration: speed });
        }
        else {
            return this.stop(true).animate({ marginBottom: marginBottom, opacity: opacity }, { queue: false, duration: speed });
        }
    };

这样我调用这个函数

$('#BusyBox').busyToggle(flag,0,1,500);

我需要知道当动画函数从调用环境结束时如何捕获。如果可能请详细讨论。感谢

Answer 1

一种方法是使用.animate()提供的回调函数另一种方法是将其添加到链队列中，如：

jQuery.fn.busyToggle = function(flag, marginBottom, opacity, speed, easing, callback) {
    if (flag == 1) {
        return this.stop(true).animate({
            marginBottom: marginBottom,
            opacity: opacity
        }, {
            queue: false,
            duration: speed
        }).queue(callback);
    }
    else {
        return this.stop(true).animate({
            marginBottom: marginBottom,
            opacity: opacity
        }, {
            queue: false,
            duration: speed
        }).queue(callback);
    }
};

Answer 2

只需将您的回调添加到animate

的完整选项即可

jQuery.fn.busyToggle = function (flag, marginBottom, opacity, speed, easing, callback) {
    ...
    this.stop(true).animate({ marginBottom: marginBottom, opacity: opacity }, { queue: false, duration: speed, complete: callback });
};

$('#BusyBox').busyToggle(flag,0,1,500, function(){ 
    // do something on complete
});

如何编写接受回调的jquery函数

2 个答案: