How to execute a function after the previous has finished using Prototype JS

Question

In my example, I want to remove a class name from one element only after a fade out of another element is completed. Here is my code thus far:

    $('search-box').observe('click', function(e) {
        $('question-box').fade();
        $('faq-box').removeClassName('left-60');
    });

As you can see these will execute one after the other, but as the element fades out slowly it will look like its executing at the same time. I want to wait to the fade completes before I remove the class name.

Any suggestions? Would a callback work here? Examples would be greatly appreciated.

Ben

Answer 1

Use the afterFinish callback to execute the function after the fade is done:

$('question-box').fade({
    afterFinish: function() {
        $('faq-box').removeClassName('left-60');
    }
});

See the Core Effects Overview for the options common to all the script.aculo.us effects.