mootools | Hide and show animation

Question

I have a mootools code:

(function() {
    var index = 0;
    Element.implement({
       toggle: function() {
        var args = Array.slice(arguments, 0);
        count = args.length - 1;
        return this.addEvent("click", function() {
               args[index].apply(this, arguments);
           index = (count > index) ? index + 1 : 0;
        });
    },
    resetToggle: function() {
       index = 0;
    }
    });
})();

document.getElement(".toggle").toggle(
    function() {
       document.id("menu").setStyle("display", "block");
    }, function() { 
       document.id("menu").setStyle("display", "none");
    }
    );
});

How to hide/show div.menu container with animation? Thanks!

Answer 1

haha this looks like my old toggle code :) do:

document.id('menu').setStyles({
    display: 'block',
    opacity: 0
}).fade(1);

and the opposite.

update to:

(function(){
    var Element = this.Element,
        Elements = this.Elements;

    [Element, Elements].invoke('implement', {
        toggle: function(){
            var args = Array.prototype.slice.call(arguments), 
                count = args.length-1,
                // start at 0
                index = 0;

            return this.addEvent('click', function(){
                var fn = args[index];
                typeof fn === 'function' && fn.apply(this, arguments);
                // loop args.
                index = count > index ? index+1 : 0;
            });
        }
    });

}());

Answer 2

If you want to make a animation you could use reveal() / dissolve() available in MooTools-More

document.getElement(".toggle").toggle(function () {
    document.id("menu").reveal();
}, function () {
    document.id("menu").dissolve();
});

Note you had a pair }); too much in your code (last line)

Example

But if you would use more, there is already a .toggle() method you can use, that would give you just show/hide like this.