This project is archived and is in readonly mode.

#434 ✓invalid
Matias N

Element.fade doesn't chain!

Reported by Matias N | October 19th, 2008 @ 05:51 AM

When I need to fade something in and out I use the fade method. Works fine, but sometimes I want a function to be called after the fading has completed.

Back before 1.2, I used the effects().start({ ... }).chain(...) process and that did the job.

Now I gotta code it like new Fx.tween(element).start('opacity',1).chain(...)

This works, but Element.fade(1).chain would be much more convenient.

Can this be added?

Comments and changes to this ticket

  • Tom Occhino

    Tom Occhino October 19th, 2008 @ 06:54 AM

    • Assigned user changed from “Valerio” to “Tom Occhino”
    • State changed from “new” to “invalid”
    • Milestone cleared.

    Element.fade, like all the other Element methods, returns the Element so you can chain Element methods... it does not return the Fx instance like .effect used to.

    If you want access to the Fx instance you have to retrieve the tween instance like the following.

    el.get('tween', options).start(...).chain(...);

    It would, however be easy for you to add a .effect method if you needed it.

  • Matias N

    Matias N October 19th, 2008 @ 07:04 PM

    I tried the method that you suggested:

    $$('div')[0].get('tween').start('opacity',0).chain(function() { alert('insane'); });

    This works, but when I try this:

    $$('div')[0].fade(0).chain(function() { alert('insane'); });

    I tested it afterward by assigning the returned value of the fade method to a variable, and then alerted it. The value of the variable is an Element instance and it has also been extended with the mootools element properties.

    But it still doesn't chain.

    The FF JavaScript debugger returns this error:

    Error: $$("div")[0].fade(0).chain is not a function

    just like you wrote above:

    "Element.fade, like all the other Element methods, returns the Element so you can chain Element methods"

    Can this be fixed?

  • Tom Occhino

    Tom Occhino October 20th, 2008 @ 03:07 AM

    .chain is not an Element method... it is an Fx method. In hindsight, after using the new API for several months, I'd actually like for all the fx shortcuts (tween, morph, fade, highlight) to return the Element's fx instance instead, just like you.

    The problem is, this would be a breaking change, so i would have to ask for the community's opinion. In any event, if we want to change it, we will probably have to wait till 1.3.

    I'm going to make a blog post very soon asking the users what they think about a few minor API changes like this one...

  • elado

    elado October 20th, 2008 @ 09:52 AM

    I agree. In most cases effects need to be chained, and it's quite useless to write another method after an effect method - anyway it'll happen before the effect even started.

    (such as $("blah").fade().setStyles(...) or whatever)

    I have just abandoned those shortcut methods in favor of real instance or get/set("tween").

  • Jonathan R.-Brochu

    Jonathan R.-Brochu October 21st, 2008 @ 01:02 AM

    I agree with making chaining of effects more straight-forward. Actually, reading this ticket I just got an idea on a plugin that would make this easier. It's pretty much all written down as I post this, but I have yet to test the concept. Basically, it would allow something like this:


    Anyway, what I realised (and this is the main reason of my comment on this ticket) is that ideally Fx.Tween should become a "special case" of Fx.Morph, i.e. have fade(), highlight() & tween() implemented/extended on Fx.Morph by only animating one property for these. This way, you could do fade/highlight/tween and morph animations on the same Fx instance (and still keep the options separate). Because, as it is right own and IMYO, the current implementation as two drawbacks:

    1) When writing plugins for Fx.Tween & Fx.Morph, you need to implement for both (no big deal, really).

    2) Since chaining is implemented per Fx instance (and Fx.Tween & Fx.Morph can only be, for now, different instances), it is not possible to chain() Fx.Tween & Fx.Morph effects more than once, i.e. to do

    Fx.Tween.start().chain( Fx.Morph.start() , this.start() )

    type-of-calls, as the first instance will remain the owner of the chain and will only ever be notified of the completion of its own effects, and not the ones of the second/other instances.

    Well, unless: - you go ugly and use the onComplete event of the second instance to continue the chain; - continue chaining on the second instance, like Fx.Tween.start().chain( Fx.Morph.start().chain( Fx.[Tween-or-Morph] ) ); - or, best option, only make use of Fx.Morph and forget fade/highlight shortcuts.

    That was just my two cents (on a closed ticket).

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Shared Ticket Bins

Referenced by