jQuery Text Fade Delay

Fade in a series of blockquote elements followed by a delayed cite elements, and simultaneously fade both out.

Demo

A working demo is provided in demo.html

Setup

1. Include the jQuery library:

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

2. Include CSS and JS:

   <link rel="stylesheet" href="css/fader.css">
   <script src="js/fader.min.js"></script>

3. 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>

4. 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
       })
    

Settings

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)

Author

Stephen Kempin

Licence

MIT