There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.
Close

Processing...
This may take a few seconds.

fade-to

Syntax

fade-to: [selector] (duration) (opacity) [(display property)] [await] [every (time)] [after (time)][, (selector)...];

This command fades in/out an element or a set of elements from an existing opacity to a specified opacity. When fading on an already fading element, it will start the new fading instructions from the fade (opacity) state that it is in, providing a smooth fading effect. It is more performant to use CSS directly (search for "CSS fade transition") for transitions, but this can be a quick and performant option when there is not a lot else going on on the page.

selector = An optional CSS selector referencing a single element (it supports me, self or this to reference the target selector it is used under) or a set of elements. If this is not specified, fading will occur on the target selector.

duration = The length of time it takes for the fade in/out to complete. Syntax is regular CSS duration format, eg. 1s (1 second) or 500ms (500 milliseconds).

opacity = The target opacity to reach at the end of the fading in/out.

display property = Used when fading in. The display property (like "inline-block", "block", etc.) that the element will use when the fading in begins.

 

This command also supports the await option, which will pause the event flow until the fading has completed before continuing. Note that if the fade does not fully complete, then the event flow will not continue from where it left off. See below for an example of using "await".

fade-to