jQuery - Cannot access my properties in function called by .animate complete:callback

Question

I've got the following piece of code that shows a popup and then hides it after a short period of time:

div.stop()
  .animate({top:'0px'},{queue:true,duration:this._speed})
  .animate({opacity: 1.0}, {queue:true,duration:this._delay})
  .animate({top:'-' + outer + 'px'},{queue:true,duration:this._speed,complete:this._myFunction});

When the animations complete, the function _myFunction fires correctly, however I have no visibility of any of my properties.

I want to set a property I've got called _showing to false.

This is some more descriptive code for my control:

MyCompany.WebNotify.prototype =
{

    initialize : function()
    {
        // Call the base initialize method
        MyCompany.WebNotify.callBaseMethod(this, 'initialize');
    },

    dispose : function()
    {

        // Clear the custom handlers
        $clearHandlers(this.get_element());

        // Call the base class method
        MyCompany.WebNotify.callBaseMethod(this, 'dispose');

    },

    // Set/set the visible property
    get_showing : function()
    {
        return this._showing;
    },
    set_showing : function(value)
    {
        var e = Function._validateParams(arguments, [{name: 'value', type: Boolean}]);
        if (e) throw e;
        if (this._showing != value)
        {
            this._updateShowing(value);
            this.raisePropertyChanged('showing');
        }
    },


    _updateShowing : function(value)
    {

        // Store the current value
        this._showing = value;

        var div = this._getMe();
        var outer =  parseInt(div.outerHeight());        
        if (value)
        {
            div.css("top", '-' + outer + 'px');
            div.css("visibility","visible");

            // If the delay is greater than 0, show, delay and then hide the notifier
            if (this._delay > 0)
            {           
                div.stop()
                .animate({top:'0px'},{queue:true,duration:this._speed})
                .animate({opacity: 1.0}, {queue:true,duration:this._delay})
                .animate({top:'-' + outer + 'px'},{queue:true,duration:this._speed,complete:this._myFunction});
            }
            else
            {
                // Show the notifier and leave it displayed
                div.stop().animate({top:'0px'},{queue:true,duration:this._speed});
            }

        }
        else if (!this._notifyFirstRun)
        {
            // Hides the notifier
            div.stop().animate({top:'-' + outer + 'px'},{queue:true,duration:this._speed});
        }

        this._notifyFirstRun = false;

    },

    _myFunction : function()
    {
        this._showing = false;  // This isn't visibile, neither is get_showing, set_showing, or any functions
       // All I see is the standard jQuery methods and properties.
    },

    _getMe : function()
    {
        return $("#" + this.get_id());
    }

}

How can I update the _showing property after the .animate event is completed?

Answer 1

Whats hapening is that callback function is being called using a different scope for this (and I believe it gets the animated DOM object, although not sure)- Here are a couple of techniques for working around it.

        if (this._delay > 0)
        {           

            // save a copy of "this"
            var myself = this;

            div.stop()
            .animate({top:'0px'},{queue:true,duration:this._speed})
            .animate({opacity: 1.0}, {queue:true,duration:this._delay})
            .animate({top:'-' + outer + 'px'},
              {
               queue:true,
               duration:this._speed,
               // create a quick anonymous function to call myself._myFunction()
               complete:function() { myself._myFunction(); }

               // alternative to do it all in one line:
               complete:(function(myself) { 
                 return function() { myself._myFunction(); };
               })(this); // calls the function immediately - returning an anonymous
                         // function that can carry "this" through as "myself"
              });
        }