Javascript Mootools-一个Fx.Morph对象用于不同效果。。。也可以变形完成

我在使用Mootools Fx.Morph对象时遇到问题。我希望我能够多次使用单个对象来创建不同的效果。我想在单个div上切换效果。但是我的效果只在第一次触发。有没有可以提供建议的Fx.Morph向导

这是我的课

    var F = new Class({

    Implements: [Options, Events],

    myFX: null,

    dDiv: null,

    options: {
        container: null,
        width: '250px',
        background: '#ccc'
    },

    initialize: function(options) {
        this.setOptions(options);
        this.addDemoDiv();
    },

    addDemoDiv: function() {
        var dDiv = new Element('div', {
            'class': 'myClass',
            html: 'Click me!',
            styles: {
                padding: '20px',
                border: '1px solid #999',
                width: this.options.width,
                background: this.options.background
            },
            events: {
                click:  this.animate.bind(this)
            }
        });

        if (!this.container) {
            this.dDiv = dDiv.inject(document.body);
        } else {
            this.dDiv = dDiv.inject(this.container);
        }

        this.myFx = new Fx.Morph(dDiv);
    },

    animate: function(e) {
        this.dDiv.set('html', 'Hello world');
        this.myFx.start({
            height: 200,
            width: 500,
            link: 'cancel',
            onComplete: function(){
                this.dDiv.removeEvent('click', this.animate);
                this.dDiv.addEvent('click', this.deanimate.bind(this));
            }.bind(this)
        });
    },

    deanimate: function(e) {
        this.dDiv.set('html', 'Click me!');
        this.myFx.start({
            height: 20,
            width: 250,
            link: 'cancel',
            onComplete: function() {
                this.dDiv.removeEvent('click', this.deanimate);
                this.dDiv.addEvent('click', this.animate.bind(this));       
            }.bind(this)
        });
    }

});

window.addEvent('domready', function() {

    var item = new F({cntainer: 'container', background: '#ddd', width: '250px'});

});

我已经尝试了很多方法，包括放弃Fx.Morph属性，每次单击都在div上调用.Morph。这似乎导致了可怕的浏览器问题，可能是因为它每次点击都会创建一个新的变形项目，并导致内存泄漏

deanimate（）方法肯定正在被调用，因为

this.dDiv.set（'html'，'Click me！'）正在工作。但该部门不会退缩。我尝试过应用其他效果，比如背景色，但它们也被忽略了

这是否意味着在运行start（）后，Fx.Morph对象将被销毁

Fx.Morph的onComplete处理程序的行为也不像您所期望的那样。当我在animate（）方法的onComplete中放入console.log时，日志消息在动画完成之前很久就会显示出来。那么onComplete是否就在脚本解析完成时呢

还是我只是个傻瓜？感谢您的指点

======================

后来添加
我已经能够通过丢失Fx.Morph对象并使用.Morph和一个切换变量设置动画来解决这个问题，如下所示

    animate: function(e) {
        if (!this.anim) {
            this.dDiv.set('html', 'Hello world');
            this.dDiv.morph({
                background: '#666',
                width: 500,
                height: 250
            });
            this.anim = true;
        } else {
            this.dDiv.set('html', 'Click me!');
            this.dDiv.morph({
                background: '#eee',
                width: 250,
                height: 100
            });
            this.anim = false;
        }
    }

但是如果有人能解释为什么第一个版本不起作用，我将非常感激
 这是绑定和移除事件中的错误

this.animate.bind（this）
返回一个函数，该函数与移除Event时比较的
this.animate
函数不同

如果绑定需要删除的事件回调，则应存储它们：
（不完整，但会先收缩。请阅读更多：

基本上：

this.boundEvents = {
    click: this.animate.bind(this)
};


或：


最后：

你可以完全重写它，只使用一个方法，但传递一个不同的对象。它将在一瞬间更新

在那里：

哦，哇，你真是个英雄！非常感谢Dimitar。你真是太慷慨了。不用担心，我喜欢与mootools共事，而不是把它作为我日常工作的一部分：）fyrye在mootools论坛上也提出了同样的观点，并发布了一些替代解决方案-参见
this.dDiv.removeEvent('click', this.boundEvents.click);

this.dDiv.addEvent('click', this.boundEvent = this.animate.bind(this));

this.dDiv.removeEvent("click", this.boundEvent);

var F = new Class({

    Implements: [Options, Events],

    myFX: null,

    dDiv: null,

    options: {
        container: null,
        width: '250px',
        background: '#ccc',
        fx: {
            animate: {
                props: {
                    height: 200,
                    width: 500
                },
                html: "hello world"
            },
            deanimate: {
                props: {
                    height: 20,
                    width: 250
                },
                html: "bye world"
            }
        }
    },

    initialize: function(options) {
        this.setOptions(options);
        this.container = this.options.container || document.body;
        this.addDemoDiv();
    },

    addDemoDiv: function() {
        this.element =  new Element('div', {
            'class': 'myClass',
            html: 'Click me!',
            styles: {
                padding: '20px',
                border: '1px solid #999',
                width: this.options.width,
                background: this.options.background
            },
            events: {
                click: this.animate.bind(this)
            },
            morph: {
                link: "cancel",
                onComplete: function() {

                }.bind(this),
                onStart: function() {
                    this.element.set("html", this.options.fx[this.action].html);
                }.bind(this),
                onCancel: function() {
                   //
                }
            }
        }).inject(this.container);

    },

    animate: function(e) {
        this.action = this.action == "animate" ? "deanimate" : "animate";
        this.element.morph(this.options.fx[this.action].props);
    }
});

new F({
    cntainer: 'container',
    background: '#ddd',
    width: '250px'
});