[Moo] setTimeout in a less Ghetto fashion

[jiggliemon]

I'm trying to achieve this "Menu fade on inactive mouse" effect like
you see in VLC player and the new Quicktime. Does anyone take issue
with how it's done in the example?

Please tell me there's a better mootools way.

http://www.jsfiddle.net/Y8Phj/3/

-Chase

[jiggliemon]

Cleaned up the code a little more,
and removed the console logs.

http://www.jsfiddle.net/Y8Phj/4/

-Chase

[Fábio M. Costa]

You could do this:

http://www.jsfiddle.net/Y8Phj/7/

--
Fábio Miranda Costa
Solucione Sistemas
Engenheiro de interfaces
Twitter: fabiomiranda

[Fábio M. Costa]

So basically i used link: 'cancel':

http://mootools.net/docs/core/Fx/Fx

--
Fábio Miranda Costa
Solucione Sistemas
Engenheiro de interfaces
Twitter: fabiomiranda

2010/5/6 Fábio M. Costa <fabio...@gmail.com>

[Eneko Alonso]

Your example, Fabio, does not fade out the menu when the mouse is inactive...

Here is the original code, with a little of cleanup.
http://www.jsfiddle.net/Y8Phj/8/

You can also use the delay() method.

2010/5/6 Fábio M. Costa <fabio...@gmail.com>:

--
Eneko Alonso
Software Engineer
http://enekoalonso.com
San Luis Obispo, California

[André Fiedler]

You should cancel the running animation before starting it again.

2010/5/6 Eneko Alonso <eneko....@gmail.com>

[Fábio M. Costa]

Oh i didnt understand the "mouse inactive", sorry.
Thanks Eneko.

--
Fábio Miranda Costa
Solucione Sistemas
Engenheiro de interfaces
Twitter: fabiomiranda

[jiggliemon]

I feel like there should be a better way than using setTimeout.
And on every pixel move, calling the "Tween In" action.

Maybe making a "Move Handler" of some sort.

-Chase

On May 6, 1:11 pm, Eneko Alonso <eneko.alo...@gmail.com> wrote:
> Your example, Fabio, does not fade out the menu when the mouse is inactive...
>

> Here is the original code, with a little of cleanup.http://www.jsfiddle.net/Y8Phj/8/

>
> You can also use the delay() method.
>

> 2010/5/6 Fábio M. Costa <fabiomco...@gmail.com>:

>
>
>
> > You could do this:
>
> >http://www.jsfiddle.net/Y8Phj/7/
>
> > --
> > Fábio Miranda Costa
> > Solucione Sistemas
> > Engenheiro de interfaces
> > Twitter: fabiomiranda
>
> > On Thu, May 6, 2010 at 3:49 PM, jiggliemon <ch...@agroism.com> wrote:
>
> >> Cleaned up the code a little more,
> >> and removed the console logs.
>
> >>http://www.jsfiddle.net/Y8Phj/4/
>
> >> -Chase
>
> >> On May 6, 11:43 am, jiggliemon <ch...@agroism.com> wrote:
> >> > I'm trying to achieve this "Menu fade on inactive mouse" effect like
> >> > you see in VLC player and the new Quicktime.  Does anyone take issue
> >> > with how it's done in the example?
>
> >> > Please tell me there's a better mootools way.
>
> >> >http://www.jsfiddle.net/Y8Phj/3/
>
> >> > -Chase
>
> --
> Eneko Alonso

> Software Engineerhttp://enekoalonso.com
> San Luis Obispo, California

[jiggliemon]

Forgot to add the link. I added the "Cancel" on the running tween.
And removes the redundant "mouseenter" event, as we already tackle
this in the mousemove.

Thanks for the 'cancel' bit.

-Chase

[jiggliemon]

http://www.jsfiddle.net/Y8Phj/11/
Forgot the link again.

[jiggliemon]

http://www.jsfiddle.net/Y8Phj/12/
Placing two times outs seems to cut down on the load.
It's a bit ugly.
But baring some other way to set a delay, it will suffice.

I've got a mouseMoveTimeout, set to a relatively low time, bypassing
the pixel to pixel call, spreading out the move event.
And the og Timeout, to check for the mouse in-activity.

Is this the best way to accomplish such a task?

-Chase

On May 6, 1:11 pm, Eneko Alonso <eneko.alo...@gmail.com> wrote:

> Your example, Fabio, does not fade out the menu when the mouse is inactive...
>

> Here is the original code, with a little of cleanup.http://www.jsfiddle.net/Y8Phj/8/

>
> You can also use the delay() method.
>

> 2010/5/6 Fábio M. Costa <fabiomco...@gmail.com>:

>
>
>
> > You could do this:
>
> >http://www.jsfiddle.net/Y8Phj/7/
>
> > --
> > Fábio Miranda Costa
> > Solucione Sistemas
> > Engenheiro de interfaces
> > Twitter: fabiomiranda
>
> > On Thu, May 6, 2010 at 3:49 PM, jiggliemon <ch...@agroism.com> wrote:
>
> >> Cleaned up the code a little more,
> >> and removed the console logs.
>
> >>http://www.jsfiddle.net/Y8Phj/4/
>
> >> -Chase
>
> >> On May 6, 11:43 am, jiggliemon <ch...@agroism.com> wrote:
> >> > I'm trying to achieve this "Menu fade on inactive mouse" effect like
> >> > you see in VLC player and the new Quicktime.  Does anyone take issue
> >> > with how it's done in the example?
>
> >> > Please tell me there's a better mootools way.
>
> >> >http://www.jsfiddle.net/Y8Phj/3/
>
> >> > -Chase
>
> --
> Eneko Alonso

> Software Engineerhttp://enekoalonso.com
> San Luis Obispo, California

[Matthew Hazlett]

How about this:
http://www.jsfiddle.net/G5Geb/

There was really no need for all those events, you just need the one.

[André Fiedler]

Does not detect mouse move...

2010/5/7 Matthew Hazlett <haz...@gmail.com>

[Matthew Hazlett]

oh, didnt know it neeed to

[Matthew Hazlett]

Dunno, if it's more elegant, but it's in a class:

http://www.jsfiddle.net/JCMkv/

 

Its more mooish, still needs work but it uses the ideas I was thinking about.  You can change the time between fades in the mousemove function.

 

Hopefully it gives you a starting point.

 

From: mootool...@googlegroups.com [mailto:mootool...@googlegroups.com] On Behalf Of André Fiedler

Sent: Thursday, May 06, 2010 6:13 PM
To: mootool...@googlegroups.com

[Matthew Hazlett]

Don't know why I bothered with this, was bored I guess:

http://www.jsfiddle.net/TFp5A/

 

Anyway, you can do it in less lines but this uses a countdown timer as opposed to an interval timer.  The advantage is you can reset the ticks on the fly instead of $clearing  the event and restarting it.

 

The options:

fadeBox: What you want to fade

timeout: How long till an idle mouse triggers a fade

leave: Does leaving trigger an immediate fadeout

 

Humm, I think this is about as practical as my mootools to .toMoo function.

http://mootools.net/shell/NK4VW/1/  [The Post]

 

From: mootool...@googlegroups.com [mailto:mootool...@googlegroups.com] On Behalf Of André Fiedler

Sent: Thursday, May 06, 2010 6:13 PM
To: mootool...@googlegroups.com

[jiggliemon]

Wow. not only is this exactly what i was thinking could be
accomplished w/ mootools, but you also did it very cleanly before i
even could take a stab at it myself. Inside a class at least.

Thanks Mathew. Consider this thread closed.

On May 7, 5:02 pm, "Matthew Hazlett" <hazl...@gmail.com> wrote:
> Don't know why I bothered with this, was bored I guess:
>
> http://www.jsfiddle.net/TFp5A/
>
> Anyway, you can do it in less lines but this uses a countdown timer as opposed to an interval timer.  The advantage is you can reset the ticks on the fly instead of $clearing  the event and restarting it.
>
> The options:
>
> fadeBox: What you want to fade
>
> timeout: How long till an idle mouse triggers a fade
>
> leave: Does leaving trigger an immediate fadeout
>
> Humm, I think this is about as practical as my mootools to .toMoo function.
>

> http://mootools.net/shell/NK4VW/1/ [The <http://groups.google.com/group/mootools-users/browse_thread/thread/cc...>  Post]

>
> From: mootool...@googlegroups.com [mailto:mootool...@googlegroups.com] On Behalf Of André Fiedler
> Sent: Thursday, May 06, 2010 6:13 PM
> To: mootool...@googlegroups.com
> Subject: Re: [Moo] Re: setTimeout in a less Ghetto fashion
>
> Does not detect mouse move...
>

> 2010/5/7 Matthew Hazlett <hazl...@gmail.com>