jQuery Plugin To Fade In Html Elements - Random Fade In

File Size: 26.3 KB
Views Total: 4675
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Fade In Html Elements - Random Fade In

Random Fade In is a simple jQuery plugin that randomly fades a set of elements in and out of visibility using jQuery fadeIn() API.

How to use it:

1. Load the jQuery library and jQuery random fade in plugin at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.random-fade-in.1.2.2.js"></script>

2. Create a set of html element you wish to add a random fade-in effect.

<div id="demo">
  <div>Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
  ...
</div>

3. Call the plugin to enable the fade-in effect.

// default settings
$('#demo').randomFadeIn(); 

// slow duration
$('#demo').randomFadeIn('slow'); 

// custom duration + disable auto loop
$('#demo').randomFadeIn(500, false); 

// reset
$('#demo').randomFadeIn('', false); 

Changelog:

v1.3.3 (2018-07-25)

  • Ensure resetting

v1.3.2 (2017-10-28)

  • Add ability to reset.

v1.3.1 (2017-05-04)

  • small changes

v1.3 (2017-04-29)

  • Add ability to reset.
  • Improve the structure of source code.
  • Add a distribution via npm.
  • Set unit testing and code coverage.

This awesome jQuery plugin is developed by sutara79. For more Advanced Usages, please check the demo page or visit the official website.