How can I blink with jQuery?

Question

I would like to blink my menu text. I have this code, but it doesn't work with IE.

(function($)
{
    $.fn.blink = function(options) {
        var defaults = { delay:500 };
        var options = $.extend(defaults, options);

        return this.each(function() {
            var obj = $(this);
            setInterval(function() {
                if($(obj).css("color") == "rgb(255, 0, 0)")
                {
                    $(obj).css('color','#000000');
                }
                else
                {
                    $(obj).css('color','rgb(255, 0, 0)');
                }
            }, options.delay);
        });
    }
}(jQuery))

$(document).ready(function(){$('.blink').blink()})

Can someone help me? Thank you!

Answer 1

You set obj as $(this), so you must call obj every time instead of $(obj).

Just replace

obj = $(this);

With just

obj = this;

But still think about people with epileption, bad sight, etc.

Answer 2

Have you checked the code with Firebug, or the built-in developer tools in Chrome? I would expect you need to change

}(jQuery))

into

})(jQuery)

(move the parenthesis around...)

Answer 3

In explorer:

if($(obj).css("color") == "rgb(255, 0, 0)")

is not true, because IE sees this:

 $(obj).css("color") == "rgb(255,0,0)";

Without spaces between numbers.

You can fix it by changing:

$(obj).css('color','rgb(255, 0, 0)');

$(obj).css('color','rgb(255,0,0)');

and

if($(obj).css("color") == "rgb(255, 0, 0)")

to

if($(obj).css("color") == "rgb(255,0,0)")

so:

(function($)
{
    $.fn.blink = function(options) {
        var defaults = { delay:500 };
        var options = $.extend(defaults, options);

        return this.each(function() {
            var obj = $(this);
            setInterval(function() {
                if($(obj).css("color") == "rgb(255,0,0)")
                {
                    $(obj).css('color','#000000');
                }
                else
                {
                    $(obj).css('color','rgb(255,0,0)');
                }
            }, options.delay);
        });
    }
}(jQuery))
$(document).ready(function(){$('.blink').blink()})

EDITED:

            (function($)
{
    $.fn.blink = function(options) {
        var defaults = { delay:500 };
        var options = $.extend(defaults, options);

        return this.each(function() {
            var obj = $(this);
            var state = false;
            setInterval(function() {
                if(state)
                {
                    $(obj).css('color','#000000');
                    state = false;
                }
                else
                {
                    $(obj).css('color','rgb(255,0,0)');
                    state = true;
                }
            }, options.delay);
        });
    }
}(jQuery))

Answer 4

The Mini-Effects plug-ins should be simpler here--very small and clearly efficient if this is all you need from the UI Effects Library (aside from those other essentials, "throb", "shake", and "bob").

Simple to use--just load the mini-effects plugin you need, then just call blink() on the element you want to blink.

<script type="text/javascript" charset="utf-8" src="javascripts/jquery.blink.min.js"></script>

Then, just call blink() on some large brightly-colored resource:

$(".selector").blink();