Little bit of help with Morph

[Roo]

Hi all,

Just looking for a bit of help about what to do when you want to reverse the effects of a morph.

http://jsfiddle.net/CjNyJ/

I'm highlighting table rows when the mouse rollovers and I'd like to use a gentle transition rather than apply a class immediately and then remove it (incidentally that works fine).

If I use Morph to morph to the hover over class I get a lovely transition. The CSS changes are applied within the style property of the element.

Is it possible to reverse the effects of a morph..?

In the JSFiddle above I have tried removing the style property on mouse out. This works ok but if you move the mouse quickly the style never gets removed and the element remains, in this case, blue, and it will also remove any styles that happen to be applied to the row for whatever reason.

Is it possible to ensure that the style is removed on mouseout when the mouse is moving quickly..?

Thanks
Rolf

[Arian Stolwijk]

you can save the initial styles: http://jsfiddle.net/CjNyJ/1/

Also it's better to have one Fx.Morph instance for each element (rather than creating a new one each time you mouseenter).

--
 
---
You received this message because you are subscribed to the Google Groups "MooTools Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mootools-user...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Roo]

OK thanks for that makes sense.

How about my second question;

http://jsfiddle.net/CjNyJ/3/

if you move the mouse down the column of divs the reversal doesnt happen though according to my Firebug the mouse out event is firing..?

Thanks again

[Johnny Fuery]

My guess, sans any investigation, is that the first transition is still running.  Looks to me (Chrome on Mac) like if you're patient with it, the transitions are working as expected.

Assuming yes, you'll need to test for whether a transition is currently running and either chain or cancel within both of your event handlers.

Johnny

[Aaron Newton]

For this particular use case, might I suggest that you have a css3 transition instead? Just do a crossfade for tr:hover.

[Rolf Herbert]

Hi Aaron,

That is indeed what I have done but I was interested in the how and whys and Ive been enlightened!

Rolf

---

From: Aaron Newton <anu...@gmail.com>
To: mootool...@googlegroups.com
Sent: Thursday, 28 March 2013, 17:34
Subject: Re: [Moo] Little bit of help with Morph

You received this message because you are subscribed to a topic in the Google Groups "MooTools Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mootools-users/hNkiDTxYSRk/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to mootools-user...@googlegroups.com.

[Sanford Whiteman]

> That is indeed what I have done but I was interested in the how and whys and Ive been enlightened!

Just for tidiness, what Johnny was referring to:

http://jsfiddle.net/CjNyJ/4/

-- S.

[Rolf Langenhuijzen]

Gee, I thought I was the only Rolf using Moo.

...sorry, this post doesn't add anything useful to the thread, lol!