Lightweight jQuery Text Blink Effect Plugin - Modern Blink

Lightweight jQuery Text Blink Effect Plugin - Modern Blink
File Size: 5.09 KB
Views Total: 12014
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Modern Blink is a very simple jQuery plugin used to blink your text using CSS3 animation or jQuery animation for old browsers. You can probably extend it to stop the blinking and start it on demand.

See also:

Basic Usage:

1. Create a container for the text you want to apply the blink animation.

<p class="demo">Sample Text</p>

2. Load the jQuery javascript library and jQuery Modern Blink plugin at the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.modern-blink.js"></script>

3. Just call the plugin and you're done.

jQuery(function($) {
$('.demo').modernBlink();
});

4. Available options.

<script>
jQuery(function($) {
$('.demo').modernBlink({
duration: 1000, // Duration specified in milliseconds (integer)
iterationCount: "infinite", // Number of times the element should blink ("infinite" or integer)
auto: true // Whether to start automatically or not (boolean)
});
});
</script>

5. Control the animation via callbacks.

<button class="blink-start">Start</button>
<button class="blink-stop">Stop</button>
$('.blink-start').on( 'click', function() {
$('.demo').modernBlink('start');
});
$('.blink-stop').on( 'click', function() {
$('.demo').modernBlink('stop');
});

Change log:

v0.1.3 (2014-08-11)


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