How to fire a prototype event after another one has finished?

Question

For example, doing this:

new Effect.Move('agrupador', { x: -100, y: 0, mode: 'relative' });
Element.setStyle('agrupador', {left: '0px' });

The left position is applied before the element moves left, but I want the opposite.

Is there any way of doing this?

PD: I will burn prototype, I promise.

Answer 1

Here's a fiddle:

http://jsfiddle.net/uF9Dh/

new Effect.Move('agrupador', {
    x: -100,
    y: 0,
    mode: 'relative',
    afterFinish: function() {
        Element.setStyle('agrupador', {left: '0px' });
    }
});
​

The move effect is asynchronous. When you call new Effect.Move(), you're setting up something to happen over the course of one second. In the code you posted, you set the left property to 0px after you instantiated the effect, not after the effect has finished. There's an afterFinish callback for this purpose. You can check out the other available callbacks for Scriptaculous effects here.

BTW - This issue was not Prototype or Scriptaculous specific, but rather the way asynchronous actions in Javascript work.