jQuery.pulsate();

jQuery.pulsate.js adds a pulsating effect to elements.
Useful for drawing the users attention.

About

jQuery.pulsate started out as an experiment with outline-offset by Kilian Valkhof. By animating it you can create a pulsating effect that's useful for focussing attention to a certain part of your webpage in a subtle way.

Usage

Simple example:

$(element).pulsate();

Custom options (defaults are shown)

$(element).pulsate({
  color: $(this).css("background-color"), // set the color of the pulse
  reach: 20,                              // how far the pulse goes in px
  speed: 1000,                            // how long one pulse takes in ms
  pause: 0,                               // how long the pause between pulses is in ms
  glow: true,                             // if the glow should be shown too
  repeat: true,                           // will repeat forever if true, if given a number will repeat for that many times
  onHover: false                          // if true only pulsate if user hovers over the element
});

Works in Chrome, Safari and Firefox. Prettiest in Firefox since it supports Outline-radius

Download

Requires, obviously, jQuery ♥

Git repo hosted at Github.com/Kilian/jQuery.pulsate. Contributions welcome!

Demos

$(".pulse1").pulsate({glow:false})
$(".pulse2").pulsate({color:"#09f"})
$(".pulse3").pulsate({reach:100})
$(".pulse4").pulsate({speed:2500})
$(".pulse5").pulsate({pause:1000})
$(".pulse6").pulsate({onHover:true})

License

Dual licensed under the MIT and GPL licenses.

~ Kilian