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

If you want to use the toggle effect:


Effect.multiple(['id_one','id_two'],function(el){Effect.toggle(el,'appear');});

In this case we selected the appear effect. Thanks to Richard.

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>