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