gistfile1.js

/**
 * Добавляем события к кнопкам. Нажатие кнопки приведет
 * к закрытию всех панелей до того, как будет показана
 * панель, соответствующая нажатой кнопке.
 */
var ChainExample = new Class({
    Implements : Chain,

    // Определяем ID кнопок и соответствующих им панелей.
    actions : new Hash({
        'button-one'   : 'panel-one',
        'button-two'   : 'panel-two',
        'button-three' : 'panel-three'
    }),

    // Массив, в котором будут храниться объекты эффектов к каждой панели.
    effects : [],

    initialize: function() {
        // Добавляем событие onclick на каждую кнопку.
        // Нажатие на кнопку приведет к вызову метода showPanel()
        this.actions.getKeys().each(function(buttonId) {
            $(buttonId).addEvent('click', this.showPanel.bindWithEvent(this));
        }, this);

        // Создаем объект Fx (эффект) для каждой панели.
        this.actions.getValues().each(function(panelId) {
            this.effects[panelId] = new Fx.Tween($(panelId), 'opacity', {
                duration   : 'short',
                // При завершении эффекта ...
                onComplete : function() {
                    // ... вызываем следующую функцию из цепочки
                    this.callChain()
                }.bind(this)
            });
        }, this);

        this.hideAll();   // Прячем все панели при инициализации
        this.callChain(); // Запускаем вызов цепочки функций
    },

    // Скрываем все панели
    hideAll: function() {
        // Пробегаемся по каждой панели и последовательно:
        //    1. плавно скрываем панель
        //    2. устанавливаем css свойство display в none
        // Заметим, что эта функция не вызывает ничего на самом деле,
        // он просто добавляет действия в цепочку (Chain)

        this.actions.getValues().each(function(panelId) {
            this.chain(
                function() { this.effects[panelId].start(0); },
                function() {
                    $(panelId).setStyles({ 'display' : 'none' });

                    // Вызываем следующую функцию из цепочки
                    this.callChain();
                }
            );
        }, this);
    },

    // При нажатии кнопки происходит плавное исчезание всех
    // открытых панелей, а затем появляется панель, соответствующая нажатой кнопке.
    showPanel: function(event) {
        this.hideAll();
        var panel = this.actions.get(event.target.get('id'));

        this.chain(
            function() {
                $(panel).setStyles({'display': 'block', 'opacity': '0'});

                // Вызываем следующую функцию из цепочки
                this.callChain();
            },
            // Запускаем эффект (появление панели)
            function() { this.effects[panel].start(1); }
        );

        // Запускаем вызов цепочки функций
        this.callChain();
    }
});

window.addEvent('domready', function() {
    var myChain = new ChainExample();
});