jQuery text loop for blockquote/cite with fade and delay effects

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:

jQuery fade text

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>&mdash; Alabama</cite> </li>
   <li>
    <blockquote>Quote No 2!</blockquote> <cite>&mdash; 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.