Question

我有一个mootools代码：

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

如何使用动画隐藏/显示div.menu容器？谢谢！

Answer 1

如果您想制作动画，可以使用MooTools中提供的reveal() / dissolve() - 更多

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

请注意，您的代码中有一对});太多了（最后一行）

Example

但是如果您使用更多，则可以使用.toggle()方法，这样您只需显示/隐藏like this。

Answer 2

哈哈这看起来像我的旧切换代码:) do：

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

与此相反。

更新至：

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

}());

mootools |隐藏和显示动画

2 个答案:

Example