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!

you should be able to do this instinctively when your eyes get dry .. — Gabriele Petrioli, Jul 29 '10 at 10:34
The only way to blink is by not using blinking. Read: MY EYES ARE BURNING! — , Jul 29 '10 at 10:34
Does IE know rgb(,,)? As IE is more dumb than a stone, I'd say yes. In this case, I would be happy when using IE :) — , Jul 29 '10 at 10:40
You could easily change the `rgb(...)` calls with `#f00` to get something you *know* is standards compliant. — Tomas Aschan, Jul 29 '10 at 10:42
@Thomas: you do know that Gecko changes everything into rgb(,,), right? — , Jul 29 '10 at 10:45
please be careful with using blink on the web, as it very easily becomes extremely distracting — second, Jul 29 '10 at 10:49

doug · Accepted Answer · 2010-08-12T09:34:20.203

5

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();

edited Aug 12 '10 at 09:34

answered Jul 29 '10 at 10:43

doug

69,080
24
165
199

are you referring to the blinking rate (pretty sure it's the same as blink method in main UI Effects Library) or cross-browser fidelity or neither? – doug Jul 29 '10 at 11:27

score 2 · Answer 2 · answered Jul 29 '10 at 10:36

2

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.

answered Jul 29 '10 at 10:36

1

Actually, that's not relevant. Since he does `.each()` on the wrapped set, `this` in this context is just a single DOM element. By wrapping it in `$()`, he makes it a jQuery set again, but it's still just one element. – Tomas Aschan Jul 29 '10 at 10:41
On second thought, I think you might be on to something. But it would be more effective to replace `$(obj)` with `obj` instead, and just perform the re-wrapping once. – Tomas Aschan Jul 29 '10 at 10:45

Peter Porfy · Answer 3 · 2010-07-29T11:12:38.027

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))

Edited. It's better to check a boolean in this case. – Peter Porfy Jul 29 '10 at 11:13 — Peter Porfy, Jul 29 '10 at 11:13

score 0 · Answer 4 · answered Jul 29 '10 at 10:40

0

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...)

answered Jul 29 '10 at 10:40

Tomas Aschan

58,548
56
243
402

How can I blink with jQuery?

4 Answers4

Linked

Related