Add JavaScript 'effects' to be used with AJAX form submissions

Question

Consider the following code:

        $form['actions']['submit']['#ajax'] = array(
            'wrapper' => 'apple-node-form',
            'callback' => 'node_add_callback',
            'method' => 'replace',
            'effect' => 'fade'
        );

This will produce a JavaScript fade animation. But how can I define my own animations? For example, 'effect' => 'myCustomAnimation'.

I'm really just looking for a way to be able to define my own JavaScript function, and have that function handle the AJAX request. I could just call .ajaxComplete() on the document and have a series of switch statements in there that figure out what to do with the response. But that's a bit hacky, and the switch statements (as well as the initial response parsing) would be additional logic. If I can just define right there in the $form array PHP code the JS function to be used, no ugly switch statement would be necessary.

Answer 1

It appears you need to install the interface elements library to add custom effects.

As indicated in the forms api.

http://api.drupal.org/api/drupal/developer!topics!forms_api_reference.html/7

ajax['effect']

Description: Specifies the effect used when adding the content from an AJAX request.

Values: String. Possible values: 'none' (default), 'fade', 'slide'. If the interface elements library is installed, any effect with the name effectToggle may also be used.

I hope this helps :)