https://github.com/brentoncozby/dom-fader

Like jQuery's fadeToggle(), fadeIn(), & fadeOut().
https://github.com/brentoncozby/dom-fader

animation fade fade-in jquery vanilla-js

Last synced: 2 months ago
JSON representation

Like jQuery's fadeToggle(), fadeIn(), & fadeOut().

• Host: GitHub
• URL: https://github.com/brentoncozby/dom-fader
• Owner: BrentonCozby
• License: other
• Created: 2017-03-08T16:03:47.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2020-03-21T20:19:31.000Z (almost 5 years ago)
• Last Synced: 2024-11-08T17:12:08.794Z (2 months ago)
• Topics: animation, fade, fade-in, jquery, vanilla-js
• Language: JavaScript
• Homepage:
• Size: 73.2 KB
• Stars: 13
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# dom-fader

[![Known Vulnerabilities](https://snyk.io/test/github/brentoncozby/dom-fader/badge.svg?targetFile=package.json)](https://snyk.io/test/github/brentoncozby/dom-fader?targetFile=package.json)

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**](https://github.com/BrentonCozby/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](https://rawcdn.githack.com/BrentonCozby/dom-fader/819f5d67d6461909a742cb0f85aa6f25780bfdd3/dist/dom-fader.js)

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:

```JavaScript

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:

```JavaScript

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