What does jQuery text fade delay plug-in?
The fade-delay plug-in is used to display the blockquotes and cite in web pages with the transition. The blockquotes element will fade away and then cite elements display in a delayed manner.
The plug-in can be good for displaying quotes, customer reviews etc. one by one in a way that the visitors of the website may get attention easily. First, the quote will display which is followed by the citation.
Have a look at the demo below:
A demo of displaying blockquote and cite with fade and delay
For the demo, a few blockquote and cite tags are used and these will display with fade and delay effect:
See online demo and code
You may set the fading time and delay of citation in the jQuery code as shown below.
Plug-in download
Get the plug-in from the developer’s page by following the link below:
Credit: SKempin
How to set up this plug-in?
You may use the CSS and JS files as used in the demo. The CSS file in the <head> section:
<link rel=”stylesheet” type=”text/css” media=”screen” href=”css/jQuery-text-fade-delay-master/fader.min.css” />
<link rel=”stylesheet” type=”text/css” media=”screen” href=”css/jQuery-text-fade-delay-master/demo.min.css” />
The JS file is included after the jQuery library:
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>
<script type=’text/javascript’ src=’js/jQuery-text-fade-delay-master/fader.min.js’></script>
Alternatively, you may install the plug-in by npm or bower:
# NPM
$ npm install jquery-text-fade-delay
# Bower
$ bower install jquery-text-fade-delay
The markup
Use the blockquote and cite tags in your web page:
<ul id="quotes"> <li> <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</blockquote> <cite>— Alabama</cite> </li> <li> <blockquote>Quote No 2!</blockquote> <cite>— Name / Place etc.</cite> </li> </ul>
Initialize the plug-in and Set the options
jQuery(document).ready(function($) { $("#quotes").fader({ fadeSpeed: 800, duration: 4500, citeDelay: 1850, citeFadeSpeed: 1200 }) });
For more, go to the developer’s page.