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

yum('.fademe').fadeIn(1000);
yum('.fademe').fadeOut(1500);


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){
yum(fademe).fadeIn(1000);
console.log('fade in');
};



//fade out click Handler

const outHandler = function(e){
yum(fademe).fadeOut(1000);
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

yum(document).ready(app);

If you have any questions about Yum please contact me.