I received a request from a client of mine who sought my help after his other developer was unable to perform a specific task using jQuery, and they didn't want to revert to Flash. As you probably guessed, he wanted a throbbing or pulsing image effect. An image (several, actually) were to "fade" in & out partially, to give the desired illusion when hovering over the image with your mouse. Not only that, but the effect needed to continue repeating as long as the mouse was hovering over the image.
I've never built such an effect before, and was unable to really locate any help with it via Google and so after a few minutes of planning and experimenting, my appreciation for jQuery's simplicity and power was once again renewed. Here, I'll explain how to achieve the effect and show a demo of it since nobody else has documented it that I could find.
To demonstrate the effect I'm going to show you how to reproduce, take your mouse and hover over this image:
Neat? I thought it was. And thanks to jQuery, the effect can be had with MINIMAL work. In fact, I'm going to provide the code for you copy/paste-type folks, and then explain how it works.
// #############################################
(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();
}
})
});
}
- Copy and paste the above code into a file (I'm using /js/pulse_image.js).
- Make any changes you'd like to the minOpacity, fadeOutDuration, fadeInDuration (duration is specified in milliseconds; 1000ms = 1 second)
- Link to the javascript file within your web-page. I'm assuming you've already linked to jQuery.
- Give your image or images that you want to have this effect a class of pulse_image.
- Enjoy!
For those who are still reading, I'm going to assume you want to know how it works. It's actually quite simple.
We set 2 global variables called pulse_image and pulse_continue_loop.
window.pulse_image is a jQuery object for the CURRENT image that is being hovered, or previous image that was being hovered.
window.pulse_continue_loop tells us whether we want to continue the pulse effect animation or not. This is a boolean flag.
When the DOM is ready, we initialize those two global variables and then create our event handlers. When any element with a class of pulse_image has its mouseover event fired, we set our pulse_continue_loop flag to TRUE, because we do want a constant pulsing effect. We also assign the pulse_image variable a jQuery object that is for the current image being hovered. Finally, we start the animation by calling PulseAnimation().
Next, we need to handle when the image is no longer being hovered. When this event fires, we set pulse_continue_loop to FALSE, because we're done with the animation… the mouse is no longer hovering. In addition, we want the current animation to stop, so we call pulse_image.stop(). Since we may have stopped that animation mid-fade, we set the image's opacity back to 100% (1).
So now we've directed what should happen, when… but still need the actual WORK done. This is where the PulseAnimation() function we called earlier comes in.
Here, we have 3 local variables we can set to configure the dynamics of our animation. Those are pretty self-explanatory and the defaults work very well. Experiment as you wish.
We take our image, pulse_image, and create an animation. The only effect we're doing is setting the opacity to minOpacity which is defined above. We specify our fadeOutDuration, and then our callback function. Within our callback function, we're starting a NEW animation, which sets the opacity back to 100% (1), over a period of time specified by fadeInDuration, which then has its own callback.
Within the second animation's callback, we check if we need to continue looping or not (via pulse_continue_loop global variable). If true, we call PulseAnimation() which starts the initial animation over again, and the cycle repeats. This is our exit strategy which is vital or else we would be stuck in an infinite loop. pulse_continue_loop gets set to FALSE whenever the mouse stops hovering over the image, effectively stopping our loop when the animation is no longer needed.
So there we have it. In 39 lines of code, we achieved a throbbing or pulsing effect with jQuery. We can make any number of images have this animation, and in fact it's not limited to only images!
Mouse Over Me!
All that's needed to be done is adding a simple class to any element that you want to have the effect. It doesn't get much easier than that. Thanks, jQuery!
