how do i add in mootools an onComplete event on a morph attached to a mouseleave?

Question

here is my code:

$('myButton').addEvents({
    mouseenter: function(){
       $('myImage').setStyle('display','block');
       $('myImage').morph({
            'duration': 500,
            'transition': Fx.Transitions.Sine.in,
            'opacity': 1,
            'top': -205
       });
    },
    mouseleave: function(){
       $('myImage').morph({
            'opacity': 0,
            'top': -175,
            'onComplete': hidemyImage
       });
    }   
});

function hidemyImage() {
    $('myImage').setStyle('display','none') 
}

the onComplete inside the mouseleave does not work as expected... it hides the image immediately when i move away from myButton instead of hiding it after the morph has finished... i tried several solutions but none worked so far. any idea / help? thanks in advance!

Answer 1

you need to work with the instance and not pass on things in the morph function directly, that takes properties to morph and it probably runs your function immediately in the hope it will return a property value. you can do el.set('morph', {onComplete: hideImagefn}) before that and it will work but read on...

one way to do it is to set your morph options/instance once and work with it afterwards like so:

(function() {
    var img = document.id('myImage').set('morph', {
        duration: 500,
        transition: Fx.Transitions.Sine.in,
        link: 'cancel',
        onStart: function() {
            this.element.setStyle('display', 'block');
        }
    }), fx = img.get('morph');

    // of you can just do var fx = new Fx.Morph(img, { options});

    document.id('myButton').addEvents({
        mouseenter: function(){
           fx.start({
                opacity: 1,
                top: -205
           });
        },
        mouseleave: function(){
            fx.addEvent('complete', function() {
                this.element.setStyle('display', 'none');
                this.removeEvents('complete');
            }).start({
                opacity: 0,
                top: -175
           });
        }   
    });

})();

the start ensures its always visible when mouseovered, the link is cancel which means it will stop execution if you mouse out too early and if you do mouseout, it will then hide the image and remove the onComplete event so that if you show it once more, it stays visible when it comes into view.

if you don't plan on being able to bring it back you can clean-up better and even use event pseudos like onComplete:once etc - though thats part of Event.Pseudos from mootools-more.

in general - .get/.set morph is your setup. el.morph() passes values to morphInstance.start()

play here: http://jsfiddle.net/dimitar/NkNHX/