Aprendemos a utilizar el método fade() de la clase Element de Mootools, que sirve para hacer efectos de fundido con transparencia.
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>
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...