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

具有外部函数的回调函数

1 个答案: