Thanks, if you want to understand what I am trying to do, here goes:
I want a box that isn't displayed to zoom into view (I found Fx.Morph
appropriate) then after it has finished morphing, to show some content
(aka $('content').addClass...), then, via a link to zoom out and
disappear again.
c1hundred
On Jan 3, 3:34 pm, nwhite <[email protected]> wrote:
> My assumption is the css properties in 'anotherEl' that your morphing are
> not initialized at start up. This means when you call
> "LightboxOpen.start('.LightboxOpenClass')" the css properties are undefined
> so it is impossible for mootools to calculate a transition.
>
> A couple of other comments.
>
> 1. It is bad form to create a new instance of Fx.Morph every time an event
> is fired.
> 2. anotherEl fires a fade and immediately fires the morph. These two
> transitions could be grouped as one, or a chain could be used for better
> control.
> 3. Your onComplete function on your Fx.Morph is extremely inefficent code.
> Each time the transition is complete your doing two heavy DOM queries.
>
> It is also hard to know exactly what your trying to achieve without seeing
> the rest of code but using a class to query your elements once and use
> referneces to your Fx objects and elements would probably make things
> easier. I recommend checking out Aaron's awesome
> site,http://www.mootorial.com/wiki/mootorial/02-classis a tutorial on using
> classes in mootools.
>
> Best,
>
> Nathanhttp://www.nwhite.net/
>
> On Sat, Jan 3, 2009 at 7:34 AM, aka CoolWhiteDude (aka c1hundred) <
>
> [email protected]> wrote:
>
> > Hi, I'm new to this group...
>
> > I have the code below which removes and adds a class onComplete of a
> > morph effect, this works fine but only after the second this morph is
> > used. I mean load the page activate it once and it doesn't work, any
> > other time after and it does, can anyone tell me why? All replies are
> > kindly appreciated.
>
> > $('openLightbox').addEvent('click', function(e) {
> > e.stop();
> > // Changes the element's style to .myClass defined in the CSS
> > anotherEl.fade('0','1');
>
> > var LightboxOpen = new Fx.Morph(anotherEl,{
> > onComplete: function(){
> > $$('.content').removeClass('contentHide');
> > $$('.contentHide').addClass('content');
> > }
> > });
> > LightboxOpen.start('.LightboxOpenClass');
> > });
>
> > c1hundred
