dom-fader
v2.0.2
Published
Plain JavaScript version of jQuery's fadeToggle(), fadeIn(), & fadeOut(), but without all the baggage.
Downloads
36
Maintainers
Readme
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:
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