Search code examples
javascriptmootoolsmootools-fx

mootools fx.reveal


I'm trying to do a simple show/hide transition for a message div using fx.reveal in mootools 1.4. The effect works the first time, but not on subsequent clicks.

Any hints as to where I'm going wrong?

http://jsfiddle.net/MYgH6/1/

var mytween = new Fx.Reveal(document.getElementById('mydiv'), {duration: 2500});

$('myclick').addEvent('click', function(){
    mymessage();
});

function mymessage(){
    var mymessage = document.getElementById('mydiv');

    mymessage.set('html','YO!');

    mytween.reveal();
    mytween.dissolve();
}

Solution

  • var mytween = new Fx.Reveal(document.getElementById('mydiv'), {
        duration: 1000,
        onComplete:function(){
            this.element.dissolve();
        }
    });
    
    $('myclick').addEvent('click', function(){
        mymessage();
    });
    
    function mymessage(){
        var mymessage = document.getElementById('mydiv');
    
        mymessage.set('html','YO!');
    
        mytween.reveal();
    }