How to fire a prototype event after another one has finished?
-
22-06-2021 - |
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.
Solution
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.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow