Jquery Image Blinker?

Is it possible to make an image blink using jquery - i.e fade to a lighter colour and back within a few seconds and loop? Just wondering if theres an alternative to u开发者_StackOverflowsing Flash for this?

Cheers Paul

I'd suggest binding a custom "fadeToggle" event to your image and swapping between effects based on a value you save to the jQuery data store for the image, then triggering the event recursively in the completion callback of each animation. This has the benefit of simply unbinding the event if you want to stop the animation.

For instance:

// Bind a custom event to your image object
$("img").bind("fadeToggle", function() {

    // Negate the current value of the fadeIn object in this element's data store
    // Initial fire will set value to !null (which == true)
    $(this).data("fadeIn", !$(this).data("fadeIn"));

    // Create a callback function to recursively trigger the event at the end of either animation
    var callback = function() {
        $(this).trigger("fadeToggle");
    };

    // Test the value in the data store
    if ($(this).data("fadeIn")) {

        // Fade in and trigger the next fadeToggle event
        $(this).fadeIn("slow", callback);
    } else {

        // Fade out and trigger the next fadeToggle event
        $(this).fadeOut("slow", callback);
    }
}).trigger("fadeToggle"); // Trigger first event to start the chain

See a working fiddle here.

After happening across some jQuery 1.4.4 changelogs, I noticed the .fadeToggle() function, which makes this even easier. The sample code is below. It basically consists of the exact same model of triggering a fadeToggle event repeatedly in the callback of the new fadeToggle animation.

$("img").bind("fadeToggle", function() {
    $(this).fadeToggle("slow", function() {
        $(this).trigger("fadeToggle");
    });
}).trigger("fadeToggle");

The fiddle has been updated with the new code.

You can overlay a div with background solid white and opacity zero and then increase the opacity to make the image appear to get lighter.

Place your image in a container div marked as position: relative, and then give your div with the white background position: absolute to make it appear directly over the image. Animate the opacity of the solid white div.

<div class="container">
  <image src="etc" alt="etc"/>
  <div class="fade"/>
</div>