1.0.0 • Published 7 years ago

jquery-text-fade-delay v1.0.0

Weekly downloads
2
License
MIT
Repository
github
Last release
7 years ago

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

SettingDefault ValueDescription
fadeSpeed500Blockquote fade in speed (ms)
duration2000Duration (ms) before fading to the next blockquote
citeDelay1200Delay (ms) until cite element fades in
citeFadeSpeed750Cite fade in speed (ms)

Author

Stephen Kempin

Licence

MIT