JOURMOLY

¿Qué es Fx.Styles?

Usamos Fx.Styles cuando deseamos modificar varias propiedades css de un elemento al mismo tiempo. Hereda los métodos, propiedades y opciones de Fx.Base por lo cual es muy similar a Fx.Style, pero con algunas diferencias que son las que nos permiten jugar con varias propiedades al mismo tiempo.

Creando una instancia de Fx.Styles

1

var misEfectos = new Fx.Styles('idElemento', {opciones});

Ahora misEfecto es una instancia de Fx.Styles que efectuara cambios en el elemento cuyo id es idElemento.

Métodos

Existen algunas diferencias con respecto a los métodos de Fx.Style

set
No logré hacerlo funcionar y no aparece en la documentación ninguna mención.

start
Es el método que nos permite indicar cuales son las propiedades que deseamos cambiar y sus correspondientes valores, ademas es quien da el inicio al efecto.

1
2
3
4
5
6
7

var misEfectos = new Fx.Styles('elemento-1');
misEfectos.start(
{
	'margin-left': [0, 383],
	'background-color': ['#B4C24B', '#ff0000'],
	'opacity': [1, 0.5]
});

Las propiedades css que vamos a cambiar se indican separadas por comas como si se trataran de propiedades de una clase y los valores de comienzo y fin van entre corchetes como un arreglo. Si deseamos podemos indicar solo el valor de fin, en ese caso va sin corchetes.

1
2
3
4
5
6
7

var misEfectos = new Fx.Styles('elemento-2');
misEfectos.start(
{
	'margin-left': 383,
	'background-color': '#ff0000',
	'opacity': 0.5
});

stop
Funciona igual que en Fx.Style.

Opciones

Las opciones son las mismas que las que se usan con Fx.Style.

Eventos

Los eventos actuan de la misma manera que en Fx.Style.

Podes ver todos los ejemplos juntos aquí, y los podes descargar desde aquí.

Otros artículos

• Mootools
• Mootools Accordion
• Se viene, se viene: Mootools 1.2 RC1
• YouTube Server Error
• De JPG a HTML