How can I blink using jQuery?

Question

I want the menu text to blink. I have this code, but it does not 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!

Answer 1

Mini-Effects plugins should be simpler here - very small and clearly effective, if that's all you need from the effects library user interface (apart from those that were needed, "pulsate", "shake" and "bob").

Ease of use - just download the mini-effects plugin that you need and then just call blink () on the item you want to blink.

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

Then just call blink () on some big bright resource:

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

Answer 2

obj $(this), obj $(obj).

obj = $(this);

obj = this;

, ..

Answer 3

In Explorer:

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

wrong because IE sees this:

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

No spaces between numbers.

You can fix this 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()})

Edition:

            (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

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

}(jQuery))

at

})(jQuery)

(move the brackets around ...)