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:

Option	Description
speed	float value, defaults to 0.1, a delay offset for each subsequent effect
delay	float value, defaults to 0.0, the effects start delay

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

Click somewhere on the list for a demo. Reset the demo.

• This is
• what you
• can do
• with
• Effect.multiple

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>