Fx Element Extensions

There are several shortcuts to initiate visual effects on DOM elements.

Methods

fade, highlight, morph, scroll, slide

top ↑fade

fade([String how[, Object options]]) -> Element self
fade([Object options]) -> Element self

Description

Runs the Fx.Fade effect on the element.

Example

$(element).fade();

$(element).fade('out');
$(element).fade('in', {onFinish: function() {}});

top ↑highlight

highlight([String color[, String end_color[, Object fx_options]]]) -> Element self
highlight([String color[, Object fx_options]]) -> Element self
highlight([Object fx_options]) -> Element self

Description

Runs the Fx.Highlight effect on the element.

Example

$(element).highlight();

$(element).highlight('blue');
$(element).highlight({onFinish: function() {}});

top ↑morph

morph(Object style[, Object fx_options]) -> Element self

Description

Runs the Fx.Morph effect on the element.

Example

$(element).morph({
width: '200px',
height: '400px'
});

top ↑scroll

scroll(Object {x:N, y:N}[, Object options]) -> Element self

Description

Smoothly scrolls to the given position.

Example

$(element).scroll({x: 100});
$(element).scroll({y: 200});
$(element).scroll({x: 10, y: 20});

$(element).scroll({x: 100}, {duration: 'long'});

top ↑slide

slide([String how[, Object fx_options]]) -> Element self
slide([Object fx_options]) -> Element self

Description

Runs the Fx.Slide effect on the element.

Example

$(element).slide();

$(element).slide('out');
$(element).slide({onFinish: function() {}});