YumJS fadeIn and fadeOut Documentation

fadeIn() and fadeOut()

Yum's fadeIn and fadeOut are very similar.

To help explain how they work I will make some buttons.

Fade Me

Fade In Fade Out

In their simplest form it looks like this:

// First parameter is Delay to start the fade which you may want if
// calling fadeOut right after fadeIn on the same element


The full code for the demo

The full code for the above demo with button click events is as follows:

function app(){

//get fademe as a variable so only dive into DOM once

const fademe = yum('.fademe')._[0];

// fade in  click Handler

const inHandler = function(e){
console.log('fade in');

//fade out click Handler

const outHandler = function(e){
console.log('fade out');

// Attach the event listeners to the buttons

yum('.fadein').addEvent('mousedown, touchstart', inHandler);
yum('.fadeout').addEvent('mousedown, touchstart', outHandler);

// run the 'app' function on document ready


If you have any questions about Yum please contact me.