如何使用 jQuery 使 <li> 元素闪烁/闪烁不同的颜色

Posted 2023-03-06

【中文标题】如何使用 jQuery 使 <li> 元素闪烁/闪烁不同的颜色

【英文标题】：How to make an <li> element flash/blink a different color using jQuery

【发布时间】：2011-12-07 23:07:21

【问题描述】：

所以我将 Telerik MVC 控件用于我正在研究的解决方案，我现在专门处理 Telerik “菜单” 控件项。

我想要做的是： 如果母版页加载时将某个属性设置为某个值，那么我将显示一个对用户查看非常重要的菜单项。我希望此菜单项在菜单栏中以红色/橙色背景不断闪烁。 Telerik 菜单项呈现为<li>'s。

我想写一些jQuery，使用jQuery 1.6.4，这样我就可以在<li> 上产生这种闪烁或闪烁的效果，这很重要。我怎样才能做到这一点？我尝试过的几乎所有东西（据说适用于 jQuery 1.2）都不起作用，并且在我尝试它们时会抛出错误。有没有使用 1.6.4 的简单方法来做到这一点？

谢谢！

【问题讨论】：

您能发布您尝试过的和无效的吗？

从用户体验和设计的角度（而不是纯代码的角度）我建议不要使用闪烁元素。还有其他方法可以让用户注意重要信息。而且您也不必编写此代码。 ;-)

***.com/questions/275931/… 我已经尝试了那里描述的每种方法......但对我不起作用......我得到的最好结果就是将背景颜色更改为警报颜色.. .然后它只是保持那种颜色...并在 jQuery 1.6.4 脚本中引发错误

@GregPettit 也许他正在设计复古

@bricker 也许吧。听起来不像。但这只是在他们认为合适的情况下考虑或忽略的建议。 ;-)

【参考方案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');
;

确保在创建 li 时将 blink_orange 或 blink_red 分配给 li。

【讨论】：

天哪，又是颜色：22。

【参考方案2】：

您可以使用setInterval 以指定的时间间隔重复操作，并使用.css 更改 CSS 属性：

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

这是上面的working example。可能有更好的方法来做到这一点（也许使用带有回调的 jQuery 的 animate 方法），但这是我首先想到的。

【讨论】：

这非常有用，并且确实使 闪烁。谢谢！我希望通过让颜色淡入淡出找到一种更具“视觉吸引力”的解决方案......关于如何获得这种效果的任何建议？如果需要淡化效果，我不介意使用 jQuery UI 插件。

使用 fadeIn() 和 fadeOut()，它们是核心 jquery 的一部分。 api.jquery.com/fadeIn