Fx Basics

By default RightJS comes with the basic visual effects package. It has one base (abstract) class Fx, which defines the common visual effects interface and is used as the basis for all the other effect classes.

Events

Fx objects handle the following events:

  • start
  • finish
  • cancel

In line with the general events handling convention this means that you can use all the common on, stopObserving etc methods as well as onStart, onFinish, onCancel shortcuts.

Options

All visual effects support the following options:

NameDefaultDescription
duration‘normal’the effect duration in ms or a string predefined name
transition‘Sin’the transition algorithm used for the effect
queuetrueboolean marker if the effect should be queued
enginenullthe engine used by Fx.Morph, defined automatically

Durations

There are three named durations which an be used in Fx options:

NameValue
short200 ms
normal400 ms (default)
long800 ms

Transitions

Since RightJS 2.3.0 the transition attribute can be defined via standard CSS3 cubic bezier functions.

Methods

initialize, cancel, finish, prepare, render, start

top ↑initialize

initialize([Element element[, Object options]])

Description

The basic constructor

top ↑cancel

cancel() -> Fx self

Description

Cancels the effect and interrupts the visual effects queue.

top ↑finish

finish() -> Fx self

Description

Forces the effect to stop and marks it as a completely finished.

top ↑prepare

prepare([....]) -> void

Description

Abstract method which gets called with the same arguments as the start method when the visual effects queue reaches this effect.

top ↑render

render(Float position) -> void

Description

Abstract protected method where the actual effect rendering is supposed to happen. During the effect run it receives float numbers from 0 to 1 that represent the position of the effect from the beginning to the end.

top ↑start

start() -> Fx self

Description

Starts the effect.

NOTE: DO NOT overload this method! If you need to make some preparations in your effect, use the prepare method. This method just receives your attributes and holds them inside the visual effects queue.