Effect.multiple

Effect multiple takes an array of elements and performs a given effect for each element. If one specific element is passed instead of an array of elements, the specific elements child nodes will be used for the effect. Each subsequent effect will start by default with a slight delay depending on the speed option.

Syntax

Effect.multiple([element1, element2, element3, …], Effect); // takes an array of elements
Effect.multiple(element, Effect); // also takes a specific element and will use its childNodes

Options

Additional to a typical effects options, Effect.multiple also takes these options:

Examples

Effect.multiple('id_of_element', Effect.Fade); // performs an Effect.Fade for each childNode of the given element
Effect.multiple(['id_one', 'id_two'], Effect.Puff); // performs an Effect.Puff for each element in the given array
Effect.multiple('id_of_element', Effect.Fade, { speed: 0 }); // instantely performs an Effect.Fade for each childNode of the given element

Demo

Source code of this demo

<style type="text/css">
  ul#multiple_demo { cursor:pointer; }
  ul#multiple_demo li { font-size:16px; }
</style>

<div class="demo">
  Click somewhere on the list for a demo. <a href="#" id="reset_link">Reset the demo</a>.
  <ul id="multiple_demo" class="on">
    <li>This is</li>
    <li>what you</li>
    <li>can do</li>
    <li>with</li>
    <li>Effect.multiple</li>
  </ul>
</div>

<script type="text/javascript">
  (function() {
    $('multiple_demo').observe('click', fadeListItems);
    $('reset_link').observe('click', reset);
    
    var listItems = $('multiple_demo').select('li');
    
    function fadeListItems() {
      Effect.multiple(listItems, Effect.Fade);
    }
    
    function reset(event) {
      event.stop();
      Effect.multiple(listItems, Effect.Appear);
    }
  })();
</script>