没有 jQueryUI 开销的 Flash 元素？

Posted 2023-03-06

【中文标题】没有 jQueryUI 开销的 Flash 元素？

【英文标题】：Flash an element without the overhead of jQueryUI?

【发布时间】：2011-12-12 19:42:06

【问题描述】：

我正在阅读 this question 关于如何在 jQuery 中使元素“闪烁”的信息，但是，最流行的答案依赖于 jQueryUI，如果我需要的只是背景颜色来制作动画，那么它非常大，可以包含在项目中。有没有办法在不使用 jQueryUI 的情况下以类似的方式闪烁元素的背景颜色？

【问题讨论】：

要完成这个“flash”你只需要ui effects core和ui effect。由于这个原因，jQuery UI 被设计成分段使用，如果你不使用它们，你不需要所有的小部件代码......

How do you make an element "flash" in jQuery的可能重复

【参考方案1】：

您可以编写一个包含 for 循环的函数，每个循环都有一些延迟。在循环的每个循环中，您可以减少/增加颜色值并将其设置为背景。这会产生与动画相同的效果。

【讨论】：

你需要使用 setInterval() 或 setTimeout() 来做延迟，避免阻塞 UI。

【参考方案2】：

在对该页面上的答案进行了一番搜索之后，我找到了一个指向jQuery workaround 的链接，它允许人们在jQuery 元素上调用函数.highlight()。虽然需要 jQuery，但不需要 jQueryUI。

【讨论】：

如果这回答了您自己的问题，您仍然可以将其标记为这样。我也认为 jquery ui 依靠“effects.js”来实现这一点。因此，如果 jquery 没有在其上执行此操作，您可能会查看效果。

【参考方案3】：

这样的事情应该可以工作（我希望）。

function flash($element, times) 
  var colors = ['#fff', '#000'];
  $element.css('background-color', colors[times % colors.length]);
  if (times === 0) return;
  setTimeout(function () 
    flash($element, times - 1);
  , 500);

在这样的元素上使用它：flash($('#some_element'), 5)

【参考方案4】：

一种方式：

setInterval(function()
  $('#hello').css('background-color', 'red');
, 100);

setInterval(function()
  $('#hello').css('background-color', 'green');
, 150);

DEMO

【讨论】：

不好的方式。这两个间隔很容易彼此不同步。最好只使用一个使用布尔值等来切换效果的选项。