jQuery Blink Plugin

As part of a website that I am building I wanted to be able to draw the users attention to a content that is already on the page. This type of behavior may have purposes else where, so I encapsulated the content into a jQuery plugin. The following screen cast shows the desired effect.

The jQuery Plugin

The following is the JavaScript that defines the jQuery plugin:

(function($) {
    $.fn.blink = function(options) {

        var defaults = {
            highlightClass: "highlight",
            blinkCount: 3,
            fadeDownSpeed: "slow",
            fadeUpSpeed: "fast",
            fadeToOpacity: 0.33
        };
        var options = $.extend(defaults, options);

        return this.each(function() {
            var obj = $(this);
            var blinkCount = 0;

            obj.addClass(options.highlightClass);
            doBlink();

            function doBlink() {
                if (blinkCount < options.blinkCount) {
                    obj.fadeTo(options.fadeDownSpeed, options.fadeToOpacity, function() {
                        obj.fadeTo(options.fadeUpSpeed, 1.0, doBlink);
                    });
                } else {
                    obj.removeClass(options.highlightClass);
                }
                blinkCount++;
            }
        });

    };
})(jQuery);

The plugin exposes a few options:

• highlighClass – This is the CSS class that is added to the element just before the first blink and is removed after the last blink.
• blinkCount – This is the number of blinks that occur.
• fadeDownSpeed, fadeUpSpeed – These options set the fade speeds.
• fadeToOpacity – This sets the lower opacity used in the blink routine.

The blink effect is realized by cycling the opacity of the element between ‘fadeToOpacity’ and 1. Additional highlighting is achieved using a CSS class.

How do I use this?

In my contact form example I have a link that is defined using the following HTML:

<p>Contact us via <a id="other-contact" href="#contact-info">snail mail or phone</a>.</p>

I also have a contact area defined by the following HTML:

<div id="contact-info">
    <h5>Contact Info</h5>
    <p>Bob Cravens</p>
    <p>123 South Main Street</p>
    <p>Verona, Wisconsin 53593</p>
    <p>1.234.567.8888</p>
</div>

Notice the href attribute uses a link to a named element. This will cause the browser to scroll to the element if it happens to be off the page. To use the jQuery plugin we hook up the click event as follows:

$(document).ready(function() {

    $("#other-contact").click(function() {

        $("#contact-info").blink({
            blinkCount: 5
        });

    });

});

The above JavaScript uses the jQuery ready event to wire up the click event for the contact anchor. Inside the click event we use jQuery to select the elements that we want to make blink and then call the ‘blink’ function. Notice in this example, I have an over ride for the ‘blinkCount’ option.

Summary

Hope this is useful. Let me know if you have improvements. The jQuery library continues to amaze me.