CODEWITHSUNDEEP
javascriptmootools
Eric_S
Eric_S

Reputation: 21

Why does this not pauseFx before morph-ing?

This morphs just fine but I need it to pause first then morph.

var animate = (function(){
    var div = document.getElement('div.es-transition');
    if (div){
        div.set('morph', {duration: 800, transition: 'quad:out'});
        div.pauseFx(1000, 'morph');
        div.addClass('hidden');
        div.setStyles({'visibility': 'hidden', 'opacity': 0});
        div.removeClass('hidden').fade('in');
    }
});

window.addEvent('load', animate);

Banging head.

TIA

Upvotes: 0

Views: 77

Answers (1)

Dimitar Christoff
Dimitar Christoff

Reputation: 26165

don't know about pauseFx? this is not standard mootools-core api. it has http://mootools.net/docs/core/Fx/Fx#Fx:pause - which needs to be applied to the instance.

in your case, it makes no sense anyway as you pause before you even run it. which means, use setTimeout or delay. pause is to stop and resume a morph/tween midway. please clarify what you are trying to achieve

also. .set('morph') does not work with .fade() - fade is based on tween options, not morph. the difference between tween and morph is single property vs multiple properties.

if I understand this correctly, you need to rewrite as:

var animate = (function(){
    var div = document.getElement('div.es-transition');
    if (div){
        div.set('tween', {duration: 800, transition: 'quad:out'});

        div.addClass('hidden');
        div.setStyles({'visibility': 'hidden', 'opacity': 0});

        (function(){
            div.removeClass('hidden').fade(0, 1);
        }).delay(1000);
    }
});

window.addEvent('load', animate);

Upvotes: 1

Related Questions