DOM Effects

Learn how to work around with Phenix DOM Effects JS/TypeScript source code to build fancy and interactive components, and create effects for your user interface like the show, hide, smooth scroll, spy-scroll, etc.

Slide Effects

with Phenix slide effects you can show and hide elements with animated sliding effects and there are three functions to do so.

• .slideUp(duration, delay) to hide elements
• .slideDown(duration, delay, display) to show elements
• .slideToggle(duration, delay, display) to change between show/hide,

the slide effects take two main parameters duration for the animation speed by milliseconds, and delay for delaying before the effect animation start, and only the show functionality supports the display the parameter which can make the element show with specific css display values like flex instead of block.

//====> Hide .targets with Sliding Effect <====//
Phenix('.targets').slideUp();

//====> Hide .targets with Sliding Effect <====//
Phenix('.targets').slideUp(700, 0);

//====> Show .targets with Sliding Effect <====//
Phenix('.targets').slideDown();

//====> Show .targets with Sliding Effect <====//
Phenix('.targets').slideDown(700, 0, 'inline-block');

//====> Show/Hide .targets with Sliding Effect <====//
Phenix('.targets').slideToggle();

//====> Show/Hide .targets with Sliding Effect <====//
Phenix('.targets').slideToggle(700, 0, 'inline-block');

Fade Effects

with Phenix fade effects you can show and hide elements with animated fading effect and there are three functions to do so,

• .fadeOut(duration, delay) to hide elements
• .fadeIn(duration, delay, display) to show elements
• .fadeToggle(duration, delay, display) to change between show/hide,

the fade effects take two main parameters duration for the animation speed by milliseconds, and delay for delaying before the effect animation start, and only the show functionality supports the display the parameter which can make the element show with specific css display values like flex instead of block.

//====> Hide .targets with Fading Effect <====//
Phenix('.targets').fadeOut();

//====> Hide .targets with Fading Effect <====//
Phenix('.targets').fadeOut(700, 0);

//====> Show .targets with Fading Effect <====//
Phenix('.targets').fadeIn();

//====> Show .targets with Fading Effect <====//
Phenix('.targets').fadeIn(700, 0, 'inline-block');

//====> Show/Hide .targets with Fading Effect <====//
Phenix('.targets').fadeToggle();

//====> Show/Hide .targets with Fading Effect <====//
Phenix('.targets').fadeToggle(700, 0, 'inline-block');