带有外部函数的回调函数

Question

在我的插件中，我在外部处理动画，它们仅在某些事件中触发。

例如：

var animateToLeft = function() {
    $elements.animate({
        marginLeft: '+=' + 300,
        marginRight: '-=' + 300
    });
},
    animateToRight = function() {
        $elements.animate({
            marginLeft: '-=' + 300,
            marginRight: '+=' + 300
        });
    };

稍后在我的插件中，我必须检查一个选项是真还是假，然后应用动画：

if( true === options ) {
    $button.click( animateToRight );
} else {
    $button.click( animateToLeft );
}

到目前为止，代码运行良好。但是我需要根据if-else语句再添加两个回调函数

var callback1 = function() {
    //do something
},
    callback2 = function() {
    //do something else
    }

我无法直接将回调函数添加到动画中我需要在 if-else 语句中添加它们。我试过这种方法，但没有奏效：

if( true === options ) {
    $button.click( animateToRight, function() {
        $body.bind( callback1 );
    });
} else {
    $button.click( animateToLeft, function() {
        $body.bind( callback2 );
    });
}

如何添加这些回调？有没有更简单的方法？

Answer 1

您可以将回调传递给动画完成后将调用的动画函数。

// Allow animate functions to be passed a callback
var animateToLeft = function (callback)
{
    $elements.animate({
        marginLeft: '+=' + 300,
        marginRight: '-=' + 300
    }, callback);
},
animateToRight = function (callback)
{
    $elements.animate({
        marginLeft: '-=' + 300,
        marginRight: '+=' + 300
    }, callback);
};

var callback1 = function(){};
var callback2 = function(){};

if( true === options )
{
    $button.on('click', function()
    {
        // when button is clicked call animate with the callback.
        animateToRight(callback1)
    });
} 
else
{
    $button.on('click', function()
    {
        animateToRight(callback2)
    });
}

DEMO