Método fade() para hacer un efecto de fundido

  • Por
Aprendemos a utilizar el método fade() de la clase Element de Mootools, que sirve para hacer efectos de fundido con transparencia.
Estamos viendo una serie de métodos para hacer efectos rápidos en Mootools. En el capítulo anterior dimos una introducción a lo que son los efectos de Mootools y queríamos empezar mostrando cómo hacer efectos recurridos y sencillos.

Fade() es un método muy rápido de usar y que sin duda resulta muy útil y bastante atractivo visualmente. Se trata de hacer lo que en inglés llaman un "fade in" o "fade out", que no es más que un efecto que muestra u oculta un elemento, con un fundido de transparente a opaco, o viceversa.

El método fade() se puede utilizar sobre cualquier elemento de la página que tengamos seleccionado o bien con la función dólar $() o la función dolardolar $$().

Por ejemplo, tenemos un elemento como este:

<div id="mielemento">
Este elemento...
</div>

Podríamos hacer un fundido de opaco a transparente con la sentencia:

$("mielemento").fade("out");

Ahora, para hacer un fundido de transparente a opaco, se puede invocar el método fade() de esta manera:

$("mielemento").fade("in");

Un ejemplo completo de uso de fade() lo podemos ver a continuación, en el que tenemos un elemento y dos enlaces, uno para hacer un "fade in" y otro para hacer un "fade out", sobre ese elemento:

<html>
<head>
   <title>Fade en mootools</title>
<script src="../mootools-1.2.3-core-yc.js" type="text/javascript"></script>
<script>
window.addEvent("domready", function(){
   //creo un evento para el enlace con id=fadeout
   $("fadeout").addEvent("click", function(evento){
      evento.preventDefault();
      //invoco el método fade sobre el elemento que quiero ocultar
      $("mielemento").fade("out");
   });
   //creo un evento para el enlace con id=fadein
   $("fadein").addEvent("click", function(evento){
      evento.preventDefault();
      //invoco el método fade sobre el elemento que quiero mostrar
      $("mielemento").fade("in");
   });
});
</script>
</head>

<body>

<a href="#" id="fadeout">Fade out</a> | <a href="#" id="fadein">Fade in</a>
<br>
<br>
<div id="mielemento" style="background-color: #ddffdd; padding: 10px; width: 120px;">
Este elemento lo tenemos para jugar a hacer efectos con Mootools
</div>

</body>
</html>

Podemos ver este ejemplo en marcha en una página aparte.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

arcangel

09/7/2009
bien
me parece muy bueno sobre todo para mostrar imagenes pero la libreria no es muy pesada?

midesweb

16/7/2009
Peso de la librería Mootools
Hola,
He creado una FAQ a propósito de tu pregunta sobre el peso, tal vez exagerado de las librerías de Mootools.

http://www.desarrolloweb.com/faq/peso-mootools-demasiado.html

Pero ya te adelanto que por diversas razones no me parece muy pesada y tienes opciones para elegir si lo deseas el juego de clases que quieres utilizar, y obtener archivos menos pesados.