Ajax Effects using Ajax #commands

Question

Assuming I have the following PHP. I want to add different effects to each of the ajax commands

function my_ajax_callback($form, $form_state) {
  $result = array(
    '#type' => 'ajax',
    '#commands' => array(
      ajax_command_replace($selector1, $html1),
      ajax_command_replace($selector2, $html2),
    ),
  );
  return $result;
}

I understand the default is something along the lines of:

ajax_command_replace($selector, $html, $settings = NULL)

However I do not know what to do with the $settings = NULL for a fade or slide to work. I've tried all combinations, but to no avail.

e.g.

ajax_command_replace($selector, $html, array('effect' => 'slide'),
ajax_command_replace($selector, $html, array('#effect' => 'slide'),
ajax_command_replace($selector, $html, 'slide')

Answer 1

I found the best solution to this was using ajax_command_invoke() and layering the required ajax effects together.

For example, you won't be able to directly fade in an element, but you can use replace or prepend, etc., then hide the element, then fade it in.

function my_ajax_callback($form, $form_state) {
  $result = array(
    '#type' => 'ajax',
    '#commands' => array(
      ajax_command_replace($selector1, $html1), //add your element
      ajax_command_invoke($html1, 'hide'), //hide it
      ajax_command_invoke($html1, 'fadeIn'), //now use the effect you're after
      ajax_command_replace($selector2, $html2), //add your other element
      ajax_command_invoke($html2, 'hide'), //hide it
      ajax_command_invoke($html2, 'show'), //use the other effect
    ),
  );
  return $result;
}

Answer 2

You can add effects to command like this:

$command = ajax_command_replace($selector, $html);
$command['effect'] = 'fade';
$command['speed'] = 2000; // Speed in ms.