Skip to content

SKempin/jQuery-text-fade-delay

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

jQuery Text Fade Delay

License GitHub stars GitHub forks

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:

  1. Clone the repo: https://github.com/SKempin/jQuery-text-fade-delay.git or bower install jquery-text-fade-delay
  2. cd /jQuery-text-fade-delay
  3. Install NPM packages: npm install
  4. Build project and launch: gulp
  5. Distilled files will be compiled into the dist directory

Setup

  1. 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>
  2. 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>
  3. 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+

Author

Stephen Kempin

SK-UK Google Play Store

Licence

MIT

About

jQuery plugin to fade in blockquote elements followed by delayed cite elements.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published