How to pass data through a call back function

Question

I am building my first plugin and I am stuck on passing variables back through the call back functions. The plugin is in early stages at the moment

$(function(){
    $.fn.test = function(options){
        options = $.extend( $.fn.test.defaults, options );
        // Set up the default options.
        $.fn.test.defaults = {
        colour : 'red'
        };
        //set up functions
        return this.each( function() {
            // Do something for each item.
             $( this ).css('background-color',options.colour);
             $(this).animate({width:'500px'},300,options.complete);
             $(this).animate({width:'200px'},300,options.done);

        });
        $.isFunction( options.setup ) && options.setup.call( this );
    };
}(jQuery));
$(document).ready(function(){
    $('#new_upload').test({
        colour:'blue',
        complete:function(){
            console.log('somehitng');
        },
        done:function(data){
            console.log(data);
        }
    });
});

This is the line that calls the callback function:

$(this).animate({width:'200px'},300,options.done);

But how would I pass data into this so that it can be recieved like this

done:function(data){
    console.log(data);
}

Answer 1

You can wrap the callback inside an anonymous function:

$(this).animate({width:'500px'},300, function(){
    options.complete("something");
});

Or alternatively, you can use Function.bind to prefill the callback with arguments:

$(this).animate({width:'500px'},300, options.complete.bind(null, "something")});