Drupal - How can I slideDown with #states?

I assume you're using the visible state?

The code that is responsible for doing this is in states.js:

$(document).bind('state:visible', function(e) {
    if (e.trigger) {
      $(e.target).closest('.form-item, .form-submit, .form-wrapper')[e.value ? 'show' : 'hide']();
    }
  });

As you can see, it calls show/hide without any configurable parameters, which means that it can't be easily changed.

However, the comment above that block is interesting:

/**
 * Global state change handlers. These are bound to "document" to cover all
 * elements whose state changes. Events sent to elements within the page
 * bubble up to these handlers. We use this system so that themes and modules
 * can override these state change handlers for particular parts of a page.
 */

If I understand this correctly, you can override the event handler for your specific page element, e.g. the form or even single form elements, by adding something like this:

$('form.your-form-class').bind('state:visible', function(e) {
  if (e.trigger) {
    $(e.target).closest('.form-item, .form-submit, .form-wrapper')[e.value ? 'slideDown' : 'slideUp']();
  }
});

I guess you will need to return FALSE to prevent that the event bubbles up further in the DOM tree.

Building on Mike's post, the code above only made the element side down, not back up again. To get it to slide up and down I added e.stopPropagation(); so the full code is:

jQuery(document).ready(function($) {
    $('form.slide').bind('state:visible', function(e) {
        if(e.trigger) {
            $(e.target).closest('.form-item, .form-submit, .form-wrapper')[e.value ? 'slideDown' : 'slideUp']();
            e.stopPropagation();
        }
    });
});