dom-fader

dom-fader

It works like jQuery's fadeToggle(), fadeIn(), & fadeOut(). Uses CSS3 transitions to animate the opacity. Saves the original display value, such as 'inline' or 'block'.

dom-slider is a thing too.

Features:

• Fading-out will save the original display value, such as 'inline-block', and fading-in will set the display back to the original value of 'inline-block' or whatever value it originally had
• You can fade multiple elements at once
• Returns a Promise resolved with the element
• Zero Dependencies and written in plain JavaScript (compiled to ES5)

Example Usage:

dom-fader CDN link

First, place the dom-fader CDN link in your html file above your own JavaScript files. Hide all the elements that you want to fade in/toggle using display: none in CSS. Then do stuff like below:

const {fadeIn, fadeOut, fadeToggle} = window.domFader

const box = document.querySelector('.box')

fadeToggle({element: box})

fadeOut({element: box, fadeSpeed: 1200})

fadeIn({element: box, fadeSpeed: 800, easing: 'easeOut'})

fadeIn({element: box, fadeSpeed: 500}).then(box => fadeOut({element: box, fadeSpeed: 300}))

Options:

No arguments required, but you may give 1 or 2 arguments to fadeToggle, fadeIn, and fadeOut:

fadeIn({
  element,
  fadeSpeed,
  direction,
  easing,
  delay = 0,
  preventDisplayNone,
  visibleDisplayValue = 'block'
})

Print Styling:

dom-fader removes the DOM-fader-hidden CSS class from all elements before printing and adds them back after printing