Pulse: jQuery plugin

By James Padolsey

'Pulse' is a recently developed jQuery plugin which applies a continual pulse to any element specified. 'Pulseable' properties include "background-color', 'color', 'border-color' and 'opacity'. You can see the realted blog post here: "ENHANCE :: New jQuery plugin: Pulse".

Tips/Instructions

Installation:

Download jQuery and Pulse.jquery.js and link to them both:
```
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="pulse.jquery.js"></script>
```
Using the "pulse" plugin for jQuery is very simple. In order to get started you need to specify an element which is to be pulsed:
```
$('#my-element').pulse();
```
The above code WILL NOT work by itself. You need to specify some options. The available options include: (click each for more info)
- backgroundColors
  
  This option takes an array object of colors specified either by their name (e.g. 'red'). their HEX value (e.g. '#FF0000') or their RGB value (e.g. 'rgb(255,0,0)'). It must contain more than 1 value. By default it contains no values and so the 'background-color' CSS property of the specified element is NOT animated. The script will animate through the colors in order and then go back to the beginning of the array when the last color has been animated. An example:
```
$('#elem').pulse({
    backgroundColors: ['red','#00FF00','black','rgb(210,0,100)']
});
```
- textColors
  
  This option takes an array object of colors specified either by their name (e.g. 'red'). their HEX value (e.g. '#FF0000') or their RGB value (e.g. 'rgb(255,0,0)'). It must contain more than 1 value. By default it contains no values and so the 'color' CSS property of the specified element is NOT animated. The script will animate through the colors in order and then go back to the beginning of the array when the last color has been animated. An example:
```
$('#elem').pulse({
    textColors: ['red','#00FF00','black','rgb(210,0,100)']
});
```
- borderColors
  
  This option takes an array object of colors specified either by their name (e.g. 'red'). their HEX value (e.g. '#FF0000') or their RGB value (e.g. 'rgb(255,0,0)'). It must contain more than 1 value. By default it contains no values and so the 'border-color' CSS property of the specified element is NOT animated. The script will animate through the colors in order and then go back to the beginning of the array when the last color has been animated. An example:
```
$('#elem').pulse({
    borderColors: ['red','#00FF00','black','rgb(210,0,100)']
});
```
  NOTE: This property will only work if the element has a border. (a border width is needed). So if you try to pulse the borderColor of an element which doesn't have a border then this won't work. It must have a border.
- opacityRange
  
  This option takes an array object of opacity values. The script will animate through them in the same fashion as color, so if you set opacityRange to [0.5,0.9] then opacity will continually pulse between 0.5 and 0.9. An example:
```
$('#elem').pulse({
    opacityRange: [0.2, 0.9, 0.3, 1]
});
```
- speed
  
  This option takes a number which equates to the amount of milliseconds (one second is 1000 milliseconds) each pulse (or half-pulse) will last. The lower the number the faster the pulse. By default the speed is set to 1000. An example:
```
$('#elem').pulse({
    speed: 400
});
```
- duration
  
  This option takes a number which equates to the amount of milliseconds (one second is 1000 milliseconds) you want the pulse to run for. By default it's set to false meaning that the pulse will run indefinitely. An example:
```
$('#elem').pulse({
    duration: 5000 // i.e. 5 seconds
});
```
- runLength
  
  This options takes a number which should be bigger than zero. This number will be the amount of times you want the script to run through your longest property array. For example:
```
$('#elem').pulse({
    textColors: ['red','blue','green']
    runLength: 1
});
```
  The above snippet of code would pulse the element through the textColor array just once, so it would go from red to blue to green and then stop. The runLength associates itself with the longest property array, so if the backgroundColors array has more values the textColors array then the script would run through all of them before stopping.
  
  By default the runLength is set to false, meaning that your pulses will run indefinitely until stopped some other way. If you set a duration AND a runLength on the same element then the pulses will stop when the first one of those is met.
Other notes:

To stop an element from pulsing simply use 'recover':
```
$('#elem').recover();
```
It's possible to pulse more than one property, so you could have the following:
```
$('#elem').pulse({
    backgroundColors: ['red','blue','green','magenta'],
    textColor: ['black','yellow','white'],
    borderColors: ['yellow','blue','purple','green','orange'],
    opacityRange: [0.3, 0.8]
});
```
The script will pulse through each specified color/opacity within it's own, meaning that each property can have a different number of color/opacity values. This diagram illustrates how the above code would work:

The above image shows the order in which the colors would change, each step would take 1000 milliseconds since that is the default speed. Obviously you can change this by specifying your own speed.

Any questions/comments? See the related blog post.
Demo 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque nunc sem, placerat sit amet, posuere in, bibendum vel, quam. Vivamus aliquam augue et erat. Nulla facilisi. Maecenas mauris ante, posuere vel, porttitor non, pellentesque mattis, justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus porttitor scelerisque elit. Cras nunc pede, pellentesque non, molestie et, elementum eu, elit. Ut odio eros, pellentesque nec, rutrum ut, pharetra quis, enim. Pellentesque blandit scelerisque erat. Mauris mattis, quam sit amet pretium hendrerit, nulla velit varius enim, et ullamcorper lectus urna nec ligula. Morbi et risus. In mi. Vestibulum vel nisi quis justo sagittis tempor.
```
$('p#opacity-demo').pulse({
    speed: 500,
    opacityRange: [0.4,0.9]
});
```
Demo 2

(with PNG gradient overlay)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque nunc sem, placerat sit amet, posuere in, bibendum vel, quam. Vivamus aliquam augue et erat. Nulla facilisi. Maecenas mauris ante, posuere vel, porttitor non, pellentesque mattis, justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus porttitor scelerisque elit. Cras nunc pede, pellentesque non, molestie et, elementum eu, elit. Ut odio eros, pellentesque nec, rutrum ut, pharetra quis, enim. Pellentesque blandit scelerisque erat. Mauris mattis, quam sit amet pretium hendrerit, nulla velit varius enim, et ullamcorper lectus urna nec ligula. Morbi et risus. In mi. Vestibulum vel nisi quis justo sagittis tempor.
```
$('p#basic-bg-demo').pulse({
    backgroundColors: ['#00dc1f','#0072f3']
});
```

Demo 3

WARNING, SOMETHING JUST HAPPENED!

$('p#alert-box-demo').pulse({
    backgroundColors: ['#ffffff','#dedede'],
    textColors: ['#de0000','#ff0000'],
    borderColors: ['red','yellow'],
    speed: 500
});

Demo 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque nunc sem, placerat sit amet, posuere in, bibendum vel, quam. Vivamus aliquam augue et erat. Nulla facilisi. Maecenas mauris ante, posuere vel, porttitor non, pellentesque mattis, justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus porttitor scelerisque elit. Cras nunc pede, pellentesque non, molestie et, elementum eu, elit. Ut odio eros, pellentesque nec, rutrum ut, pharetra quis, enim. Pellentesque blandit scelerisque erat. Mauris mattis, quam sit amet pretium hendrerit, nulla velit varius enim, et ullamcorper lectus urna nec ligula. Morbi et risus. In mi. Vestibulum vel nisi quis justo sagittis tempor.
```
$('p#rainbow-demo').pulse({
    backgroundColors: ['red','orange','yellow','green','blue','indigo','violet'],
    textColors: ['white','black','black','white','white','white','white']
});
```

Demo 5

(Using a PNG as the <IMG/>)

$('#png-photo').pulse({
    backgroundColors: ['#eeae00','#ffdf5e'],
    speed: 500
});

Pulse: jQuery plugin

By James Padolsey

Tips/Instructions

Installation:

`backgroundColors`

`textColors`

`borderColors`

`opacityRange`

`speed`

`duration`

`runLength`

Other notes:

Any questions/comments? See the related blog post.

Demo 1

Demo 2

Demo 3

Demo 4

Demo 5