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.
Here's a fiddle:
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.