Как заставить элемент <li>мигать / мигать другим цветом, используя jQuery

Question

Поэтому я использую элементы управления Telerik MVC для решения, над которым я работаю, и сейчас я специально имею дело с элементом управления Telerik "Меню" .

Я пытаюсь сделать следующее: если главная страница загружается с определенным свойством, для которого установлено определенное значение, то я покажу пункт меню, который очень важен для пользователей.Я хочу, чтобы этот пункт меню постоянно мигал с красным / оранжевым фоном в строке меню.Пункты меню telerik отображаются как <li>.

Я хочу написать несколько jQuery, используя jQuery 1.6.4 , чтобы у меня был этот мигающий или мигающий эффект на <li>, который важен.Как я могу это сделать?Почти все, что я пробовал (якобы работало для jQuery 1.2), не работает и выдает ошибки, когда я их пробую.Есть ли простой способ сделать это с помощью 1.6.4?

Спасибо!

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');
};

Убедитесь, что blink_orange или blink_red присвоены li при его создании.

Answer 2

Вы можете использовать setInterval, чтобы повторить действие с указанным интервалом, и .css, чтобы изменить свойство CSS:

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

Вот рабочий пример из вышеперечисленного. Возможно, есть лучший способ сделать это (возможно, с помощью метода jQuery animate с обратным вызовом), но это то, что сначала пришло мне в голову.