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>
Visto en | Noupe.com