Mootools – Fancy Show and Hide

Mootools

En este tutorial muestro como ocultar y mostrar elementos (show and hide) de manera animada con Mootools.
Primero haremos un ejemplo básico y luego el avanzado.

Antes que nada tendremos que incluir la librería Mootools para comenzar a implementar esta funcionalidad, para este ejemplo estoy usando la versión 1.2.0

<script src="mootools.js"></script>

Ejemplo básico:

Incluiremos este script en el head para implementar los metodos para un elemento

window.addEvent('domready', 
  function() 
  {  
    Element.implement(
    {  
    //mostrar
    show: function() 
    {  
      this.setStyle('display','');  
    },  
    //ocultar
    hide: function() 
    {  
      this.setStyle('display','none');  
    }  
  });  
});  

En nuestra pagina podremos llamar a los metodos show() y hide() de esta manera:

<a onclick="$('element').show()">Mostrar</a>/
<a onclick="$('element').hide()">Ocultar</a>
<div id="element">Show/Hide</div>

Ver demo1

Ejemplo Avanzado:

Incluiremos el javascript que nos creara dos metodos mas, estos los llamaremos fancyShow() y fancyHide()

window.addEvent('domready', function() 
{  
  Element.implement(
  {       
    fancyShow: function() 
    {  
      this.fade('in');  
    },  
    fancyHide: function() 
    {  
      this.fade('out');  
    }  
  });  
});  

Para llamar a estos metodos lo podremos hacer igual que el anterior ejemplo

<a onclick="$('element').fancyShow()">Mostrar</a>
<a onclick="$('element').fancyHide()">Ocultar</a>
<div id="element">Show/Hide</div>

Ver demo2

Recursos:

También te puede interesar

One Comment

  1. unijimpe
    ago 25, 2009 @ 11:17:26

    Craftyman, excelente ejemplo para ocultar/mostrar un div. En mi caso yo utilizo otra forma:

    $(‘btmostrar’).addEvent(‘click’, function() {
    $(‘element’).fade(‘toggle’);
    });

    Ahora el problema es que se oculta el div pero la zona lo bloque se queda alli, es decir queda un bloque en blanco, para resolver esto hay que cambiar la altura del div llamado ‘element’.

    Saludos y felicitaciones por el blog.