https://github.com/skempin/jquery-text-fade-delay

jQuery plugin to fade in blockquote elements followed by delayed cite elements.
https://github.com/skempin/jquery-text-fade-delay

css javascript jquery jquery-plugin sass

Last synced: 10 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/skempin/jquery-text-fade-delay
• Owner: SKempin
• License: mit
• Created: 2017-01-24T12:27:22.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2019-01-16T15:36:11.000Z (almost 6 years ago)
• Last Synced: 2024-10-16T11:03:13.076Z (30 days ago)
• Topics: css, javascript, jquery, jquery-plugin, sass
• Language: CSS
• Homepage: https://skempin.github.io/jQuery-text-fade-delay/
• Size: 293 KB
• Stars: 13
• Watchers: 5
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# jQuery Text Fade Delay

[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/SKempin/jQuery-text-fade-delay/blob/master/LICENSE)

[![GitHub stars](https://img.shields.io/github/stars/SKempin/jQuery-text-fade-delay.svg?style=flat-square)](https://github.com/SKempin/jQuery-text-fade-delay/stargazers)

[![GitHub forks](https://img.shields.io/github/forks/SKempin/jQuery-text-fade-delay.svg?style=flat-square)](https://github.com/SKempin/jQuery-text-fade-delay/network)

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](https://skempin.github.io/jQuery-text-fade-delay/)

## Installation

[node.js](http://nodejs.org/download/) 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`

2. Install NPM packages: `npm install`

3. Build project and launch: `gulp`

4. Distilled files will be compiled into the `dist` directory

## Setup

1. Include the plugin dist CSS and JS files in your ``:

	```html

	

	

	```

2. Use the following HTML structure:

    ```html

        


            


                
Quote goes here

                Citation goes here

            

            


                
Second quote goes here

                Citation goes here

            

        

    ```


3. Call the plugin:

    ```javascript

	$("#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](https://www.stephenkempin.co.uk)

[SK-UK Google Play Store](https://play.google.com/store/apps/developer?id=SK+-+UK)

## Licence

[MIT](https://github.com/SKempin/jQuery-text-fade-delay/blob/master/LICENSE)