Flash 元素没有 jQueryUI 的开销？

Question

我正在阅读这个问题关于如何制作jQuery 中的“flash”元素，但是，最流行的答案依赖于 jQueryUI，如果我需要的只是要制作动画的背景颜色，那么 jQueryUI 相当大，无法包含在项目中。有没有一种方法可以在不使用 jQueryUI 的情况下以类似的方式闪烁元素的背景颜色？

Answer 1

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

Answer 2

像这样的东西应该有效（我希望）。

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)

Answer 3

一种方法：

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

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

DEMO

Answer 4

在该页面上的答案中进行了一番搜索后，我发现了一个指向 jQuery 解决方法 的链接，该解决方法允许人们调用函数jQuery 元素上的 .highlight()。虽然需要 jQuery，但不需要 jQueryUI。