Class, Fx.Morph, chain

Chains several animations

by andfinally

CSS

#demodiv
{
    width: 100px;
    height: 50px;
    border: 1px solid #999;
    background: #eee;
}

JavaScript

var F = new Class({

    Implements: [Options, Events],

    options: {
        container: null
    },

    element: null,
    container: null,
    fx: null,

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

    injectDiv: function() {
        this.element = new Element('div', {
            'id': 'demodiv',
            events: {
                click: this.animate.bind(this)
            }
        });
        this.fx = new Fx.Morph(this.element);
        // Null coalescing using ||
        this.container = this.options.container || document.body;
        this.element.inject(this.container);
    },

    animate: function() {
        this.fx.start({
            width: 200,
            height: 100
        }).chain(function() {
            // this refers to the calling object, fx
            this.start({
                width: 20,
                height: 10
            });
        }).chain(function() {
            this.start({
                width: 100,
                height: 50 
            }) 
        });
        
    } // End of animate
});

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

    var myF = new F();

});