Prototype/Scriptaculous Toggle Queue

Question

I want to achieve an effect on a certain div with scriptaculous that does the following:

1. The div will blindUp.
2. After that effect is complete, the contents of the div will change.
3. The div will then blindDown with the new contents.

So I know there is the effect queue which is awesome, but how can the contents only after the blindUp effect is complete?

Also is there a way to make toggle work with the queue?

Answer 1

You can do this with queues and delays, but this is the simplest.

new Effect.BlindUp('something',{afterFinish:function() {
   $('something').innerHTML="###";
   new Effect.BlindDown('something');
  }    
})

You can then wrap this in a function, pass it the new content and make it behave like a toggle.

Additional documentation is here: http://proto-scripty.wikidot.com/scripty:how-to-timing-and-sequencing-animations