Question

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 using Flash for this?

Cheers
Paul

Answer 1

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.

---

EDIT:

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.