Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de MooTools (II Efectos)

MooTools: la librería más completa para trabajar fácilmente con javascript.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.

MooTools2 (XI)

La clase Fx.Slide

Introducción

El efecto Fx.Slide() hace que un elemento aparezca o desaparezca mediante un efecto de deslizamiento. El elemento aparece o desaparece con un deslizamiento progresivo sobre sí mismo, puede ser en vertical o en horizontal. El efecto es como si hubiera una puerta por la que el elemento puede entrar o salir de la escena.

Instanciar el objeto

Tal como hemos visto con las clases anteriores, lo primero que debemos hacer para utilizar esta clase es instanciar un objeto. Como primer argumento pondremos el elemento al que queremos aplicarle el efecto, y como segundo una serie de opciones, pertenecientes a la clase Fx, a las que pueden añadirse otras opciones propias de esta clase.

efecto=new Fx.Slide($("elemento"),{[opciones]});

Como opciones podemos poner las opciones generales de la clase Fx (las de Fx.Morph), y además las siguientes opciones específicas de Fx.Slide :

• mode : indica el modo en el que debe aparecer o desaparecer el elemento. Los posibles valores son las cadenas "vertical" (valor por defecto) o "horizontal".
• wrapper : Como valor se indicará el elemento ($("element")) al que se le aplica el efecto. Por defecto es el mismo que hemos dicho al instanciar el objeto, pero podemos poner otro con esta opción.
• hideOverflow : Valores true (por defecto) o false. Con true vemos un comportamiento normal donde el elemento se oculta. Con false el elemento no se oculta sino que se desplaza hacia arriba o a la izquierda, permaneciendo visible en el lugar donde se supone debería estar cuando está oculto.

• resetHeight : restablece automáticamente la altura del elemento al completarse la animación.

Métodos y propiedades

Para trabajar con este efecto es fundamental aplicar sus diferentes métodos, los cuales son los que hacen que el elemento se oculte o se visualice.

.slideIn()

<div id="caja1">
  <div  id="botones">
    <button id="boton1">slideIn</button> .
    <button id="boton2">slideOut</button> .
    <button id="boton3">toggle</button> .
    <button id="boton4">show</button> .
    <button id="boton5">hide</button>
  </div>
  <div id="texto1">
    <p>párrafo primero de un texto de prueba para comprobar el efecto "Fx.Slide".</p>
    <p>párrafo segundo también de prueba para hacer relleno y 
       que se alargue más el elemento.</p>
  </div>
</div>

#caja1 { width: 40%; height: 170px; border: 1px solid black; float: right; 
       font: normal 13px verdana; margin: 1em 3em 1em 1em; }
#caja1 #botones {  color: yellow; background-color: blue; 
       text-align: center; font: normal 11px verdana;
       padding: 3px; margin: 5px; }
#caja1 #texto1 { color: blue; background-color: yellow; margin: 5px; }
#caja1 #texto1 p {  font: normal 14px verdana;padding: 5px; }

efecto=new Fx.Slide($("texto1"),{
  duration: 1200,
  transition: "bounce:out",
  mode: "vertical"
  });
$("boton1").addEvent("click",function(){
  efecto.slideIn();
  })
$("boton2").addEvent("click",function(){
  efecto.slideOut();
  })
$("boton3").addEvent("click",function(){
  efecto.toggle();
  })
$("boton4").addEvent("click",function(){
  efecto.show();
  })
$("boton5").addEvent("click",function(){
  efecto.hide();
  })