How to make an <li> 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!

Answer 1

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.

Answer 2

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.