> Manuales > Manual de Mootools

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.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual