toggleEffects( )
Toggles the state of one or more of an element's effects.
Description
This function toggles the state of the effects specified in the function call. This means that if an effect included in the call was previously applied, it's removed and is no longer visible on your site. If an effect included in the call wasn't previously applied, it's applied when you call the function and becomes visible on your site.
You can find the names of the effects defined for an element using the allEffects property.
The Effects panel in Editor X has two sections, Adjust and Design, that allow you to adjust the appearance of an element or change its design characteristics. You can't simultaneously apply 2 effects that both change properties in the same section. If you try to do this, only one of the effects is visible on your site. You can, however, apply 1 effect that changes the Adjust properties and another effect that changes the Design properties simultaneously.
For example, effects for text elements allow changes to these properties:
If you create 2 effects that each change properties in the Adjust section and try to apply them together, only one is visible on your site. The same is true for 2 effects that change properties in the Design section.
Note: This function can only be used in Editor X.
Syntax
function toggleEffects(effects: Array<string>): void
toggleEffects Parameters
NAME
TYPE
DESCRIPTION
The names of the effects to toggle. These are the names defined when creating the effects.
Returns
This function does not return anything.
Return Type:
Was this helpful?
1$w('#myElement').effects.toggleEffects(['My Effect']);
1$w('#myElement').effects.toggleEffects(['My Effect 1', 'My Effect 2']);
1$w.onReady(() => {2 // ...3 setInterval(() => {4 $w('#myElement').effects.toggleEffects(['My Effect']);5 }, 3000);6})