How do you make an element "flash" in jQuery

Question

I'm brand new to jQuery and have some experience using Prototype. In Prototype, there is a method to "flash" and element -- i.e. briefly highlight it in another color and have it fade back to normal so that the user's eye is drawn to it. Is there such a method in jQuery? I see fadeIn, fadeOut, and animate, but I don't see anything like "flash". Perhaps one of these three can be used with appropriate inputs?

Answer 1

Would a pulse effect(offline) JQuery plugin be appropriate for what you are looking for ?

You can add a duration for limiting the pulse effect in time.

---

As mentioned by J-P in the comments, there is now his updated pulse plugin.
See his GitHub repo. And here is a demo.

Answer 2

You could use the highlight effect in jQuery to achieve the same, I quess.

Answer 3

You could use this plugin (put it in a js file and use it via script-tag)

http://plugins.jquery.com/project/color

And then use something like this:

jQuery.fn.flash = function( color, duration )
{

    var current = this.css( 'color' );

    this.animate( { color: 'rgb(' + color + ')' }, duration / 2 );
    this.animate( { color: current }, duration / 2 );

}

This adds a 'flash' method to all jQuery objects:

$( '#importantElement' ).flash( '255,0,0', 1000 );

Answer 4

doesnt seem to work

Answer 5

Nice jQuery UI highlight effect for what i was looking for, thanks VonC.

Answer 6

You don't need to install any plug-ins. You can do it with standard jQuery functions, and background colors (assuming you're dealing with an element that supports background colors, of course). For example, to draw attention to all the divs on your page, you could use the following code:

$("div").stop().css("background-color", "#FFFF9C")
.animate({ backgroundColor: "#FFFFFF"}, 1500);

Edit - New and improved

The following uses the same technique as above, but it has the added benefits of:

• parameterized highlight color and duration
• retaining original background color, instead of assuming that it is white
• being an extension of jQuery, so you can use it on any object

Extend the jQuery Object:

$.fn.animateHighlight = function(highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    var originalBg = this.css("backgroundColor");
    this.stop().css("background-color", highlightBg).animate({backgroundColor: originalBg}, animateMs);
};

Usage example:

$("div").animateHighlight("#dd0000", 1000);

Answer 7

Here is a camera flash effect ..generates a full page flash effect with sound. http://motyar.blogspot.com/2010/07/camera-flash-effect-with-jquery.html