[bzcomputers]

I came across this reusable code to pulsate (by changing opacity) an image via javascript.

It is currently set to pulse on .mouseover and stop on .mouseout. What I would like is for it to pulse continually and then go to an opacity of 1 on mouseover, then continue with pulse after .mouseout. Also, as far as I know there isn't a "pause" for javasctipt. How would I go about pausing for "X" seconds after each pulse?

Any help would be appreciated. Thanks.

// #############################################
(function($) {
	$(document).ready(function() {
		window.pulse_image = null;
		window.pulse_continue_loop = false;

		$('.pulse_image').mouseover(function() {
			// User is hovering over the image.
			window.pulse_continue_loop = true;
			window.pulse_image = $(this);

			PulseAnimation(); // start the loop
		}).mouseout(function() {
			window.pulse_continue_loop = false;
			window.pulse_image.stop();
			window.pulse_image.css('opacity',1);
		});
	});
})(jQuery);

// #############################################
function PulseAnimation()
{
	var minOpacity = .33;
	var fadeOutDuration = 650;
	var fadeInDuration = 650;

	window.pulse_image.animate({
		opacity: minOpacity
	}, fadeOutDuration, function() {
		window.pulse_image.animate({
			opacity: 1
		}, fadeInDuration, function() {
			if(window.pulse_continue_loop) {
				PulseAnimation();
			}
		})
	});
}

Here are the instructions to use:

1) Copy and paste the above code into a file (I'm using /js/pulse_image.js).
2) Make any changes you'd like to the minOpacity, fadeOutDuration, fadeInDuration (duration is specified in milliseconds; 1000ms = 1 second)
3) Link to the javascript file within your web-page. I'm assuming you've already linked to jQuery.
4) Give your image or images that you want to have this effect a class of pulse_image.