Question

我有以下代码显示弹出窗口，然后在很短的时间后隐藏它：

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});

当动画完成时，_myFunction函数会正确触发，但我无法看到任何属性。

我想将一个名为_showing的属性设置为false。

这是我控制的一些更具描述性的代码：

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());
    }

}

如何在.animate事件完成后更新_showing属性？

Answer 1

什么是hapening是使用this的不同范围调用回调函数（我相信它得到动画DOM对象，虽然不确定） - 这里有几种解决它的技术。 / p>

        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"
              });
        }

jQuery - 无法在.animate complete：callback调用的函数中访问我的属性

1 个答案: