jQuery.blink()

A jQuery plugin that makes things blink (similar to the old <blink> tag).

Usage


//blink quickly
  $('.alert').blink('fast');

//fade out quickly then back in slowly
  $('.alert').blink('fast','slow');

//fade out for 1 second then back in for 1 second...
  $('.alert').blink(1000);

//fade out for 700ms then back in for 3 seconds...
  $('.alert').blink(700,3000);

//stop blinking now
  $('.alert').blink();

//stop blinking after fading back in
  $('.alert').removeClass('blink');

Download

samblink.js

Demo

Tested in

Firefox 3.5 on Debian Linux
Chrome 14 on Debian Linux
Opera 11 on Debian Linux
Internet Explorer 6 on Windows XP
Internet Explorer 9 on Windows 7

CSS3 Alternative

In modern browsers with CSS animation support, you can make things blink without using any javascript.


<style>
  @-keyframes 'blink' { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
  @-webkit-keyframes 'blink' { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
  @-moz-keyframes 'blink' { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
  @-ms-keyframes 'blink' { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
  @-o-keyframes 'blink' { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
  .blink {
    -animation: 'blink' 1s infinite step-end;
    -webkit-animation: 'blink' 1s infinite step-end;
    -moz-animation: 'blink' 1s infinite step-end;
    -ms-animation: 'blink' 1s infinite step-end;
    -o-animation: 'blink' 1s infinite step-end;
  }
  .pulse {
    -animation: 'blink' 1s infinite linear;
    -webkit-animation: 'blink' 1s infinite linear;
    -moz-animation: 'blink' 1s infinite linear;
    -ms-animation: 'blink' 1s infinite linear;
    -o-animation: 'blink' 1s infinite linear;
  }
</style>