Question

Please tell me how to use PrototypeJS to hide (fade out) all the li elements.

P.S. there can be any number of li elements.

HTML:

<div class="rtr-img" >
  <ul id="rotator_ul">
    <li id="rtr-img-1"><a href="/link/1/"><img src="b1.jpg"/></a></li>
    <li id="rtr-img-2"><a href="/link/2/"><img src="b2.jpg"/></a></li>
    <li id="rtr-img-3"><a href="/link/3/"><img src="b3.jpg"/></a></li>
  </ul>
</div>

Answer 1

As far as I’m aware, PrototypeJS does not have animations/effects built in. You can use the Scriptaculous library, which is an add-on to Prototype, and provides a fade method.

If you want to fade out the entire ul element:

$("rotator_ul").fade({ 
    from: 1,
    to: 0 
});

If you want to (as stated in your question) fade out all li elements:

$$("li").invoke("fade", { 
    from: 1, 
    to: 0 
});