How to make an
element flash/blink a different color using jQuery

Question

So I am using the Telerik MVC controls for a solution that I am working on and I am specifically dealing with the Telerik "Menu" control item right now.

What I am trying to do is this: If the master page loads with a certain property set to a certain value, then I will display a menu item that is very important for users to see. I want this menu item to constantly blink with a red/orange background in the menu bar. The telerik menu items are are rendered as <li>'s.

I want to write some jQuery, using jQuery 1.6.4, so that I can have this blinking or flashing effect on the <li> that is important. How can I do this? Almost all of the things that I have tried (that supposedly worked for jQuery 1.2) are not working and are throwing errors when I try them. Is there an easy way to do this using 1.6.4?

Thanks!

From a user-experience and design perspective (rather than a pure code perspective) I would advise against blinking elements. There are other ways to get a user's attention for important information. And you'll save yourself having to write this code as well. ;-) — Greg Pettit, Oct 14 '11 at 17:55
http://stackoverflow.com/questions/275931/how-do-you-make-an-element-flash-in-jquery I have tried each of the ways described there...not working for me though...the best result I have gotten was just to change the background color to the alert color...and then it just stayed that color...and threw an error in the jQuery 1.6.4 scripts — Flinn, Oct 14 '11 at 17:57
@bricker Maybe. Didn't sound like it. But it's just advice to be taken under consideration or ignored as they see fit. ;-) — Greg Pettit, Oct 14 '11 at 18:01
@GregPettit Heh, I was half-way through that joke comment when I decided it was stupid, guess I accidentally hit my `return` key before leaving the page. Whoops. — bricker, Oct 14 '11 at 18:08

score 3 · Answer 1 · answered Oct 14 '11 at 17:59

3

You can use setInterval to repeat an action at a specified interval, and .css to change a CSS property:

var x = false;
setInterval(function() {
    $("li").css("background-color", x ? "#ff0000" : "#ffaa00");
    x = !x;
}, 500);

Here's a working example of the above. There may well be a better way of doing this (perhaps with jQuery's animate method with a callback), but that's what first popped into my mind.

answered Oct 14 '11 at 17:59

James Allardice

164,175
21
332
312

This is very helpful and did work to make the
blink. Thank you! I am hoping to find a solution that is more 'visually appealing' by having the colors fade in and out...Any advice on how to get that sort of effect? I don't mind using the jQuery UI plugin if need be for the fading effects.

Flinn

Oct 14 '11 at 18:03

Use `fadeIn()` and `fadeOut()` which are part of core jquery. http://api.jquery.com/fadeIn/ – Ryre Aug 30 '12 at 17:14

score 3 · Accepted Answer · answered Oct 14 '11 at 18:01

3

css:

.blink_orange{ background-color: orange; }
.blink_red{ background-color: red; }

javascript:

$(function(){
    setInterval(blinkLi, 200);    
});

function blinkLi(){
    $('ul .ClassToBlink').toggleClass('blink_orange blink_red');
};

Make sure to assign blink_orange or blink_red to the li when it's created.

answered Oct 14 '11 at 18:01

Ryre

6,135
5
30
47

Oh dear, it's COLOR: 22 all over again. – Chud37 Jul 29 '13 at 11:29

How to make an element flash/blink a different color using jQuery

2 Answers2

How to make an
element flash/blink a different color using jQuery