Search...
show( )
Shows the element and sets its hidden
property
to false
, using an effect if specified.
Description
The show()
function shows the element and returns a Promise that is
resolved when the effect is complete and the element's hidden
property has been set to false
.
You can optionally apply an effect when showing the element by providing
an effectName
value. You can also customize the effect by providing the
optional effectOptions
object.
This table shows possible effectName
values
and their corresponding names in the editor:
Effect Name Value | Editor Animation Name |
---|---|
"arc" | Arc-In |
"bounce" | Bounce-In |
"fade" | Fade-In |
"flip" | Flip-In |
"float" | Float-In |
"fly" | Fly-In |
"fold" | Fold-In |
"glide" | Glide-In |
"puff" | Puff-In |
"roll" | Reveal |
"slide" | Slide-In |
"spin" | Spin-In |
"turn" | Turn-In |
"zoom" | Expand-In |
Notes:
- In Editor X,
show ()
will not make an element visible for a given breakpoint if the element has been set to "Don't Display" for that breakpoint. Callingshow()
will however, change thehidden
property of the element tofalse
.- It is recommended not to mix
show
andhide
with "Don't Display" in Editor X.
Syntax
function show([effectName: string], [effectOptions: ArcEffectOptions | BounceEffectOptions | FadeEffectOptions | FlipEffectOptions | FloatEffectOptions | FlyEffectOptions | FoldEffectOptions | GlideEffectOptions | PuffEffectOptions | RollEffectOptions | SlideEffectOptions | SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions]): Promise<void>
show Parameters
NAME
TYPE
DESCRIPTION
effectName
Optional
string
The name of the effect to play when showing the item.
effectOptions
Optional
ArcEffectOptions | BounceEffectOptions | FadeEffectOptions | FlipEffectOptions | FloatEffectOptions | FlyEffectOptions | FoldEffectOptions | GlideEffectOptions | PuffEffectOptions | RollEffectOptions | SlideEffectOptions | SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions
The effect's options.
Returns
Fulfilled - When the effect is complete and the element's hidden
property has been set to false
.
Return Type:
Promise<void>
Mixed in from:$w.HiddenCollapsedElement
Was this helpful?
Show an element with no effect
Copy Code
1$w("#myElement").show();
Show an element with the "fade" effect
Copy Code
1$w("#myElement").show("fade");
Show an element with the "fade" effect and custom options
Copy Code
1let fadeOptions = {2 "duration": 2000,3 "delay": 10004};56$w("#myElement").show("fade", fadeOptions);
Show an element with an effect and log a message when the effect is done
Copy Code
1$w("#myElement").show("fade")2 .then( ( ) => {3 console.log("Done with fade");4 } );
Toggle an element's hidden state
Copy Code
1if( $w("#myElement").hidden ) {2 $w("#myElement").show();3}4else {5 $w("#myElement").hide();6}