jQuery Text Fade Delay
Fade in a series of blockquote elements followed by a delayed cite elements, and simultaneously fade both out.
Demo
jQuery Text Fade Delay - Live DEMO
Installation
node.js is required to get npm.
If you would like to download the code and try it for yourself:
- Clone the repo:
https://github.com/SKempin/jQuery-text-fade-delay.gitorbower install jquery-text-fade-delay cd /jQuery-text-fade-delay- Install NPM packages:
npm install - Build project and launch:
gulp - Distilled files will be compiled into the
distdirectory
Setup
-
Include the plugin dist CSS and JS files in your
<head>:<link rel="stylesheet" href="dist/css/fader.min.css"> <script src="dist/js/fader.min.js"></script>
-
Use the following HTML structure:
<ul id="quotes"> <li> <blockquote>Quote goes here</blockquote> <cite>Citation goes here</cite> </li> <li> <blockquote>Second quote goes here</blockquote> <cite>Citation goes here</cite> </li> </ul>
-
Call the plugin:
$("#quotes").fader({ fadeSpeed: 750, // blockquote fade in speed duration: 4000, // duration before fading to the next blockquote citeDelay: 1500, // delay until cite element fades in citeFadeSpeed: 1000 // cite fade in speed })
Options
| Setting | Default Value | Description |
|---|---|---|
| fadeSpeed | 500 | Blockquote fade in speed (ms) |
| duration | 2000 | Duration (ms) before fading to the next blockquote |
| citeDelay | 1200 | Delay (ms) until cite element fades in |
| citeFadeSpeed | 750 | Cite fade in speed (ms) |
Browser Support
- Chrome 42+
- Firefox 39+
- Safari 9+
- Internet Explorer 10+
- Edge 14+
