jQuery: использование $ (this) внутри функции обратного вызова самоопределяемой функции jQuery

Question

Это самоопределяемая функция jQuery

$.fn.wider = function(callback) {  
    $(this).animate({width: 500}, function() {
        callback();
    });
};

Вызов функции

$('#div').wider(function() {
    console.log('div resizing done');

    // $(this) refers to window instead of $('#div')
    $(this).css({background: '#f00'});
});

, как я могу использовать $ (this), как в приведенной ниже функции щелчка?*

$('#div').click(function() {
    console.log('div clicked');

    // $(this) refers to $('#div')
    $(this).css({background: '#f00'});
});

Answer 1

Использование Function.apply.

$.fn.wider = function(callback) {  
    $(this).animate({width: 500}, function() {
        if (typeof callback === 'function') {
            callback.apply(this); // <- here
        }
    });
};

Несколько более общая реализация:

$.fn.wider = function(callback) {
    var self = this;
    $(this).animate({width: 500}, function() {
        if (typeof callback === 'function') {
            callback.apply(self);
        }
    });
};