controllerOpacity


opacity(opacity, duration, affect, register_actions,
           ease_type, ease_amount, ease_mirror)

opacity.messages = [fade_in, fade_out, show, hide]
opacity.events   = [start_fade_in, end_fade_in,
                       start_fade_out, end_fade_out,
                       show, hide]

Description

element

Performs opacity transitions on the element. Parameter opacity supplies the opacity of the visible state of the element.

Modifies element's style.opacity CSS property. If parameter affect is supplied, then the element's CSS property style.display or style.visibility will also be modified.

Parameters

Visit page Controller # Common Parameters for documentation on the parameters, common to all controllers: id, paused and disabled.

Parameters of opacity():

duration

Duration of the animation in milliseconds. Default value: 1000

opacity

Amount of opacity applied to the element in its 'visible' state. Default value: 1

affect

Whether the opacity animation should change the element's style.display or style.visibility properties when the element reaches its 'hidden' state.
Possible values:

"" - style.display and style.visibility are not affected,
"display" - style.display is set to "none" when the element's opacity reaches 0, and then back to its original value when the element's opacity becomes different than 0,
"visibility" - style.visibility is set to "hidden" when the element's opacity reaches 0, and then back to "visible" when the element's opacity becomes different than 0.

Default value: ""

register_actions

Tells whether to handle the element's show, hide, show_immediately and hide_immediately actions.
Values: false / true / "500" (i.e. react with 500 milliseconds delay) / "500 elm" (i.e. set event handlers with delay 500ms for HTML element #elm's actions). Default value: false

ease_type

What kind of 'easing' to be applied on the animation.
Currently supported values:

"linear" - constant speed in all animation parts,
"ease" - slower start and end of animation, elliptical shape,
"ease_in" - slower start, fast and sudden end,
"ease_out" - fast and sudden start, slow end.

Default value: "ease"

ease_amount

Strength of 'easing' to be applied on the animation.
Values in the range (0 - 1] make sense, though values greater than 1 (up to 2-3) can also be of use. Default value: 1

ease_mirror

Tells if the easing applied on 'backwards' transition is the same as the forward easing, or mirrored. If this parameter is set to true and parameter ease_type is "ease_in", then upon a backwards transition, "ease_out" easing will be applied. Default value: false

Accepted Messages

Visit page Controller # Common Messages for documentation on the messages, accepted by all controllers: pause, unpause, enable, disable, params and remove.

Message Parameters: Note that along the message parameters specific to each message type, every message (not only params) accepts as parameters any of the controller parameters, which are set before the message is executed.

Messages accepted by opacity():

fade_in: Starts animating the opacity of the element from its current value to the value of parameter opacity. Message params: none
fade_out: Starts animating the opacity of the element from its current value to 0. Message params: none
show: Set immediately the element's opacity to the value of parameter opacity. Message params: none
hide: Set immediately the element's opacity to 0. Message params: none

Generated Events

Visit page Controller # Common Events for documentation on the events, generated by all controllers: frame, remove, paused, unpaused enabled and disabled.

Events fired by opacity():

start_fade_in: Fired upon starting animation with message fade_in. Event params: none
end_fade_in: Fired upon reaching the end of fade_in animation. Event params: none
start_fade_out: Fired upon starting animation with message fade_out. Event params: none
end_fade_out: Fired upon reaching the end of fade_out animation. Event params: none
show: Fired upon showing the element with message show. Event params: none
hide: Fired upon hiding the element with message hide. Event params: none

Interaction with DOM

Transforms: Does not apply any CSS transforms.
CSS: Works with any styling. Sets style.opacity and optionally style.display or style.visibility element's CSS properties.
Events: Does not set event listeners.

Changes Log

Controller introduced in v.0.80