Ocultando elementos de lista con MooTools

Queremos obtener el siguiente efecto: cuando un usuario haga clic en un enlace (?Ocultar?), el elemento <li> asociado desaparece con un bonito efecto slide-out. Una forma sencilla de implementar una desaparición animada como ésta es usando MooTools slideOut(), que se activa al pinchar en un enlace

Artículos recientes

Queremos obtener el siguiente efecto: cuando un usuario haga clic en un enlace (?Ocultar?), el elemento <li> asociado desaparece con un bonito efecto slide-out. Una forma sencilla de implementar una desaparición animada como ésta es usando MooTools slideOut(), que se activa al pinchar en un enlace contenido en el <li> de la lista. Este tutorial explica cómo implementarlo con sólo cinco líneas de código javascript.

Lo primero que necesitamos es implementar una lista (id="milista") con elementos etiquetados con identificadores progresivos (l1, l2, l3, l4, l5) y el enlace ?Ocultar? en cada uno de ellos.

Aquí está el código javascript que habilita el efecto slideOut():

<script>
window.addEvent('domready', function() {
/* From the list with ID myList, for each li element of the list...: /
$('myList').getElements('li').each(function(e){
/
...get the ID of the selected item /
e.getElement('a').addEvent('click', function(listID){
/
Enable Fx.Slide effect for the selected item /
var list_element = new Fx.Slide(listID);
/
Enable slideOut() effect */
list_element.slideOut()
}.pass(e.id));
});
});
</script>

Ver demostración

*Visto en | *Noupe.com