Question

Question title is confusing, I know. it also make my search hard to find a solution.

assume I have these codes, how can I pass parameter to complete or step when .animate() option is an external object?

var someObj = {
    onComplete: function(e) {
        console.log(e); // return undefined
    },

    onStep: function(e) {
        console.log(e); // return undefined too
    },
}

var optionObj = {
    duration: 300,
    easing: 'linear',
    complete: someObj.onComplete(e), // this is not working
    step: someObj.onStep(e) // this is not working
}

$('div').animate({width: "500px", height: "500px"}, optionObj);

Answer 1

To pass your own parameters to those callbacks and to ensure that this is correctly set to someObj within those callbacks you will probably need additional closures:

var optionObj = {
    duration: 300,
    easing: 'linear',
    complete: function() {
        someObj.onComplete(e);  // assumes 'e' is defined somewhere
    },
    step: function(now, fx) {   // jQuery automatically supplies these parameters
        someObj.onStep(e);      // so you need to pass your own instead
    }
}