Search code examples
javascripthtmlprototypejs

Fade out all the "LI" elements

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>
Solution

  • 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 
});