$w.EffectOptions

$w.EffectOptions

The Rendering API is used to control when code is run as a page is being loaded.

Contents

ArcEffectOptions An object used to customize the "arc" effect.
BounceEffectOptions An object used to customize the "bounce" effect.
FadeEffectOptions An object used to customize the "fade" effect.
FlipEffectOptions An object used to customize the "flip" effect.
FloatEffectOptions An object used to customize the "float" effect.
FlyEffectOptions An object used to customize the "fly" effect.
FoldEffectOptions An object used to customize the "fold" effect.
GlideEffectOptions An object used to customize the "glide" effect.
PuffEffectOptions An object used to customize the "puff" effect.
RollEffectOptions An object used to customize the "roll" effect.
SlideEffectOptions An object used to customize the "slide" effect.
SpinEffectOptions An object used to customize the "spin" effect.
TurnEffectOptions An object used to customize the "turn" effect.
ZoomEffectOptions An object used to customize the "zoom" effect.
ArcEffectOptions

ArcEffectOptions

An object used to customize the "arc" effect.

Description

The ArcEffectOptions object is used for the effectOptions parameter when calling the show() and hide() functions with the "arc" effect.

Key Valid Values Default
duration 0-4000 milliseconds 1200
delay 0-4000 milliseconds 0
direction left, right left

Type

Object

Properties

duration Number
delay Number
direction String

Examples

Show an element using the arc effect and options

bGV0IGFyY09wdGlvbnMgPSB7CiAgImR1cmF0aW9uIjogICAyMDAwLAogICJkZWxheSI6ICAgICAgMTAwMCwKICAiZGlyZWN0aW9uIjogICJyaWdodCIKfTsKCiR3KCIjbXlFbGVtZW50Iikuc2hvdygiYXJjIiwgYXJjT3B0aW9ucyk7Cg==
let arcOptions = {
  "duration":   2000,
  "delay":      1000,
  "direction":  "right"
};

$w("#myElement").show("arc", arcOptions);

See Also

show( ), hide( )

BounceEffectOptions

BounceEffectOptions

An object used to customize the "bounce" effect.

Description

The BounceEffectOptions object is used for the effectOptions parameter when calling the show() and hide() functions with the "bounce" effect.

Key Valid Values Default
duration 0-4000 milliseconds 1200
delay 0-4000 milliseconds 0
direction topLeft, topRight, bottomRight, bottomLeft, center topLeft
intensity soft, medium, hard medium

Type

Object

Properties

duration Number
delay Number
direction String
intensity String

Examples

Show an element using the bounce effect and options

bGV0IGJvdW5jZU9wdGlvbnMgPSB7CiAgImR1cmF0aW9uIjogICAyMDAwLAogICJkZWxheSI6ICAgICAgMTAwMCwKICAiZGlyZWN0aW9uIjogICJ0b3BSaWdodCIsCiAgImludGVuc2l0eSI6ICAic29mdCIKfTsKCiR3KCIjbXlFbGVtZW50Iikuc2hvdygiYm91bmNlIiwgYm91bmNlT3B0aW9ucyk7Cg==
let bounceOptions = {
  "duration":   2000,
  "delay":      1000,
  "direction":  "topRight",
  "intensity":  "soft"
};

$w("#myElement").show("bounce", bounceOptions);

See Also

show( ), hide( )

FadeEffectOptions

FadeEffectOptions

An object used to customize the "fade" effect.

Description

The FadeEffectOptions object is used for the effectOptions parameter when calling the show() and hide() functions with the "fade" effect.

Key Valid Values Default
duration 0-4000 milliseconds 1200
delay 0-4000 milliseconds 0

Type

Object

Properties

duration Number
delay Number

Examples

Show an element using the fade effect and options

bGV0IGZhZGVPcHRpb25zID0gewogICJkdXJhdGlvbiI6ICAgMjAwMCwKICAiZGVsYXkiOiAgICAgIDEwMDAKfTsKCiR3KCIjbXlFbGVtZW50Iikuc2hvdygiZmFkZSIsIGZhZGVPcHRpb25zKTsK
let fadeOptions = {
  "duration":   2000,
  "delay":      1000
};

$w("#myElement").show("fade", fadeOptions);

See Also

show( ), hide( )

FlipEffectOptions

FlipEffectOptions

An object used to customize the "flip" effect.

Description

The FlipEffectOptions object is used for the effectOptions parameter when calling the show() and hide() functions with the "flip" effect.

Key Valid Values Default
duration 0-4000 milliseconds 1200
delay 0-4000 milliseconds 0
direction top, right, bottom, left right

Type

Object

Properties

duration Number
delay Number
direction String

Examples

Show an element using the flip effect and options

bGV0IGZsaXBPcHRpb25zID0gewogICJkdXJhdGlvbiI6ICAgMjAwMCwKICAiZGVsYXkiOiAgICAgIDEwMDAsCiAgImRpcmVjdGlvbiI6ICAicmlnaHQiCn07CgokdygiI215RWxlbWVudCIpLnNob3coImZsaXAiLCBmbGlwT3B0aW9ucyk7Cg==
let flipOptions = {
  "duration":   2000,
  "delay":      1000,
  "direction":  "right"
};

$w("#myElement").show("flip", flipOptions);

See Also

show( ), hide( )

FloatEffectOptions

FloatEffectOptions

An object used to customize the "float" effect.

Description

The FloatEffectOptions object is used for the effectOptions parameter when calling the show() and hide() functions with the "float" effect.

Key Valid Values Default
duration 0-4000 milliseconds 1200
delay 0-4000 milliseconds 0
direction top, right, bottom, left right

Type

Object

Properties

duration Number
delay Number
direction String

Examples

Show an element using the float effect and options

bGV0IGZsb2F0T3B0aW9ucyA9IHsKICAiZHVyYXRpb24iOiAgIDIwMDAsCiAgImRlbGF5IjogICAgICAxMDAwLAogICJkaXJlY3Rpb24iOiAgInJpZ2h0Igp9OwoKJHcoIiNteUVsZW1lbnQiKS5zaG93KCJmbG9hdCIsIGZsb2F0T3B0aW9ucyk7Cg==
let floatOptions = {
  "duration":   2000,
  "delay":      1000,
  "direction":  "right"
};

$w("#myElement").show("float", floatOptions);

See Also

show( ), hide( )

FlyEffectOptions

FlyEffectOptions

An object used to customize the "fly" effect.

Description

The FlyEffectOptions object is used for the effectOptions parameter when calling the show() and hide() functions with the "fly" effect.

Key Valid Values Default
duration 0-4000 milliseconds 1200
delay 0-4000 milliseconds 0
direction top, right, bottom, left right

Type

Object

Properties

duration Number
delay Number
direction String

Examples

Show an element using the fly effect and options

bGV0IGZseU9wdGlvbnMgPSB7CiAgImR1cmF0aW9uIjogICAyMDAwLAogICJkZWxheSI6ICAgICAgMTAwMCwKICAiZGlyZWN0aW9uIjogICJyaWdodCIKfTsKCiR3KCIjbXlFbGVtZW50Iikuc2hvdygiZmx5IiwgZmx5T3B0aW9ucyk7Cg==
let flyOptions = {
  "duration":   2000,
  "delay":      1000,
  "direction":  "right"
};

$w("#myElement").show("fly", flyOptions);

See Also

show( ), hide( )

FoldEffectOptions

FoldEffectOptions

An object used to customize the "fold" effect.

Description

The FoldEffectOptions object is used for the effectOptions parameter when calling the show() and hide() functions with the "fold" effect.

Key Valid Values Default
duration 0-4000 milliseconds 1200
delay 0-4000 milliseconds 0
direction top, right, bottom, left left

Type

Object

Properties

duration Number
delay Number
direction String

Examples

Show an element using the fold effect and options

bGV0IGZvbGRPcHRpb25zID0gewogICJkdXJhdGlvbiI6ICAgMjAwMCwKICAiZGVsYXkiOiAgICAgIDEwMDAsCiAgImRpcmVjdGlvbiI6ICAicmlnaHQiCn07CgokdygiI215RWxlbWVudCIpLnNob3coImZvbGQiLCBmb2xkT3B0aW9ucyk7Cg==
let foldOptions = {
  "duration":   2000,
  "delay":      1000,
  "direction":  "right"
};

$w("#myElement").show("fold", foldOptions);

See Also

show( ), hide( )

GlideEffectOptions

GlideEffectOptions

An object used to customize the "glide" effect.

Description

The GlideEffectOptions object is used for the effectOptions parameter when calling the show() and hide() functions with the "glide" effect.

Key Valid Values Default
duration 0-4000 milliseconds 1200
delay 0-4000 milliseconds 0
angle 0-360 degrees 0
distance 0-300 pixels 0

Type

Object

Properties

duration Number
delay Number
angle Number
distance Number

Examples

Show an element using the glide effect and options

bGV0IGdsaWRlT3B0aW9ucyA9IHsKICAiZHVyYXRpb24iOiAgIDIwMDAsCiAgImRlbGF5IjogICAgICAxMDAwLAogICJhbmdsZSI6ICAgICAgMTgwLAogICJkaXN0YW5jZSI6ICAgMTUwCn07CgokdygiI215RWxlbWVudCIpLnNob3coImdsaWRlIiwgZ2xpZGVPcHRpb25zKTsK
let glideOptions = {
  "duration":   2000,
  "delay":      1000,
  "angle":      180,
  "distance":   150
};

$w("#myElement").show("glide", glideOptions);

See Also

show( ), hide( )

PuffEffectOptions

PuffEffectOptions

An object used to customize the "puff" effect.

Description

The PuffEffectOptions object is used for the effectOptions parameter when calling the show() and hide() functions with the "puff" effect.

Key Valid Values Default
duration 0-4000 milliseconds 1200
delay 0-4000 milliseconds 0

Type

Object

Properties

duration Number
delay Number

Examples

Show an element using the puff effect and options

bGV0IHB1ZmZPcHRpb25zID0gewogICJkdXJhdGlvbiI6ICAgMjAwMCwKICAiZGVsYXkiOiAgICAgIDEwMDAKfTsKCiR3KCIjbXlFbGVtZW50Iikuc2hvdygicHVmZiIsIHB1ZmZPcHRpb25zKTsK
let puffOptions = {
  "duration":   2000,
  "delay":      1000
};

$w("#myElement").show("puff", puffOptions);

See Also

show( ), hide( )

RollEffectOptions

RollEffectOptions

An object used to customize the "roll" effect.

Description

The RollEffectOptions object is used for the effectOptions parameter when calling the show() and hide() functions with the "roll" effect.

Key Valid Values Default
duration 0-4000 milliseconds 1200
delay 0-4000 milliseconds 0
direction top, right, bottom, left left

Type

Object

Properties

duration Number
delay Number
direction String

Examples

Show an element using the roll effect and options

bGV0IHJvbGxPcHRpb25zID0gewogICJkdXJhdGlvbiI6ICAgMjAwMCwKICAiZGVsYXkiOiAgICAgIDEwMDAsCiAgImRpcmVjdGlvbiI6ICAicmlnaHQiCn07CgokdygiI215RWxlbWVudCIpLnNob3coInJvbGwiLCByb2xsT3B0aW9ucyk7Cg==
let rollOptions = {
  "duration":   2000,
  "delay":      1000,
  "direction":  "right"
};

$w("#myElement").show("roll", rollOptions);

See Also

show( ), hide( )

SlideEffectOptions

SlideEffectOptions

An object used to customize the "slide" effect.

Description

The SlideEffectOptions object is used for the effectOptions parameter when calling the show() and hide() functions with the "slide" effect.

Key Valid Values Default
duration 0-4000 milliseconds 1200
delay 0-4000 milliseconds 0
direction top, right, bottom, left left

Type

Object

Properties

duration Number
delay Number
direction String

Examples

Show an element using the slide effect and options

bGV0IHNsaWRlT3B0aW9ucyA9IHsKICAiZHVyYXRpb24iOiAgIDIwMDAsCiAgImRlbGF5IjogICAgICAxMDAwLAogICJkaXJlY3Rpb24iOiAgInJpZ2h0Igp9OwoKJHcoIiNteUVsZW1lbnQiKS5zaG93KCJzbGlkZSIsIHNsaWRlT3B0aW9ucyk7Cg==
let slideOptions = {
  "duration":   2000,
  "delay":      1000,
  "direction":  "right"
};

$w("#myElement").show("slide", slideOptions);

See Also

show( ), hide( )

SpinEffectOptions

SpinEffectOptions

An object used to customize the "spin" effect.

Description

The SpinEffectOptions object is used for the effectOptions parameter when calling the show() and hide() functions with the "spin" effect.

Key Valid Values Default
duration 0-4000 milliseconds 1200
delay 0-4000 milliseconds 0
direction cw, ccw cw
cycles 1-15 5

Type

Object

Properties

duration Number
delay Number
direction String
cycles Number

Examples

Show an element using the spin effect and options

bGV0IHNwaW5PcHRpb25zID0gewogICJkdXJhdGlvbiI6ICAgMjAwMCwKICAiZGVsYXkiOiAgICAgIDEwMDAsCiAgImRpcmVjdGlvbiI6ICAiY2N3IiwKICAiY3ljbGVzIjogICAgIDEwCn07CgokdygiI215RWxlbWVudCIpLnNob3coInNwaW4iLCBzcGluT3B0aW9ucyk7Cg==
let spinOptions = {
  "duration":   2000,
  "delay":      1000,
  "direction":  "ccw",
  "cycles":     10
};

$w("#myElement").show("spin", spinOptions);

See Also

show( ), hide( )

TurnEffectOptions

TurnEffectOptions

An object used to customize the "turn" effect.

Description

The TurnEffectOptions object is used for the effectOptions parameter when calling the show() and hide() functions with the "turn" effect.

Key Valid Values Default
duration 0-4000 milliseconds 1200
delay 0-4000 milliseconds 0
direction right, left right

Type

Object

Properties

duration Number
delay Number
direction String

Examples

Show an element using the turn effect and options

bGV0IHR1cm5PcHRpb25zID0gewogICJkdXJhdGlvbiI6ICAgMjAwMCwKICAiZGVsYXkiOiAgICAgIDEwMDAsCiAgImRpcmVjdGlvbiI6ICAibGVmdCIKfTsKCiR3KCIjbXlFbGVtZW50Iikuc2hvdygidHVybiIsIHR1cm5PcHRpb25zKTsK
let turnOptions = {
  "duration":   2000,
  "delay":      1000,
  "direction":  "left"
};

$w("#myElement").show("turn", turnOptions);

See Also

show( ), hide( )

ZoomEffectOptions

ZoomEffectOptions

An object used to customize the "zoom" effect.

Description

The ZoomEffectOptions object is used for the effectOptions parameter when calling the show() and hide() functions with the "zoom" effect.

Key Valid Values Default
duration 0-4000 milliseconds 1200
delay 0-4000 milliseconds 0

Type

Object

Properties

duration Number
delay Number

Examples

Show an element using the zoom effect and options

bGV0IHpvb21PcHRpb25zID0gewogICJkdXJhdGlvbiI6ICAgMjAwMCwKICAiZGVsYXkiOiAgICAgIDEwMDAKfTsKCiR3KCIjbXlFbGVtZW50Iikuc2hvdygiem9vbSIsIHpvb21PcHRpb25zKTsK
let zoomOptions = {
  "duration":   2000,
  "delay":      1000
};

$w("#myElement").show("zoom", zoomOptions);

See Also

show( ), hide( )