Scriptaculous: Los efectos (2)

Siguiendo con los efectos del nucleo de Scriptaculous, aquí están los tres siguientes.

Effect.Morph cambia las propiedades CSS de un elemento. Su sintaxis es:

new Effect.Morph('nombre_elemento',opciones);

por ejemplo:

onclick="new Effect.Morph("nombre_elemento", {style:{width:'200px'});return false;"

aunque, la mejor forma de utilizar este efecto es usando este tipo de código:

onclick="getElementById('nombre_elemento').morph('propiedades_de_estilo');return false;"

Debe tenerse en cuenta que el estilo original debe estar definido previamente.

DEMO utilizando OnMouseOver y OnMouseOut

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Effect.Move desplaza un elemento. Su sintaxis es:

new Effect.Move('nombre_elemento',opciones);

por ejemplo:

onclick="new Effect.Move ('nombre_elemento',{ x: 0, y: 0, mode: 'absolute'});
return false;"

lo moverá al ángulo superior izquierdo de la pantalla y:

onclick="new Effect.Move('nombre_elemento', { x: 20, y: 20, mode: 'relative'});
return false;"

lo desplazará a partir e la posición donde se encuentra el elemento.

Effect.Parallel es un efecto especial que permite combinaciones. Su sintaxis es:

new Effect.Parallel(lista,opciones]);

No es sencillo de implementar y hay otras alternativas que pueden utilizarse y que serán mostradas en el siguiente post. De cualquier manera, este es un ejemplo:

<a href="javascript:void(0);" 
onclick="
new Effect.Parallel( [ 
new Effect.Opacity('scrdemo61',{from:0.25, to:1.0}),
new Effect.Move('scrdemo61',{x:32,y:0,mode:'relative'})
]);return false;
">CLICK</a>