jQuery如何在div上实现“闪烁高亮”效果？

Question

我正在寻找一种实现以下功能的方法。

我向页面添加一个 <div>，然后使用 ajax 回调返回一些值。该 <div> 填充了来自 ajax 调用的值，然后被插入到另一个 <div> 中，作为一个表列。

我想引起用户的注意，向她/他展示页面上有新内容。
我希望 <div> 闪烁，不是显示/隐藏，而是在一段时间内高亮/取消高亮，比如说 5 秒钟。

我一直在查看闪烁插件，但据我所见它只能对元素进行显示/隐藏操作。

顺便提一下，解决方案必须跨浏览器，并且是包括 IE 在内的所有浏览器。我可能需要做一些 hack 才能使它在 IE 中工作，但整体上必须正常工作。

- ZolaKt

---

请不要这样做。如果必须这样做，只需使用高亮效果进行突出显示 (http://docs.jquery.com/UI/Effects/Highlight)，但请不要让它闪烁。 - tvanfosson

@tv 我认为短暂的两三个“闪烁”（其中“闪烁”应该是一些微妙的东西，比如动画边框发光或类似的东西）是可以接受且不会让人感到烦躁，但是长时间的老式闪烁肯定是不好的。 - Pointy

呵呵，我知道闪烁很烦人，但它在这里确实有一个目的。用户不必整天坐在监视器旁边，因此他必须从远处看到是否有变化。 - ZolaKt

你们真是太有趣了。网页只被用于你们认为正确的目的吗？我不想强调，我需要一个闪烁效果，因为我正在编写一个进程监视器页面，将在大屏幕电视上显示，并且需要不断闪烁成红色，以便人们的注意力被吸引。 - Bmo

可能是如何在jQuery中使元素“闪烁”的重复问题。 - cweiske

Answer 1

jQuery UI Highlight Effect是您正在寻找的内容。

$("div").click(function () {
      $(this).effect("highlight", {}, 3000);
});

文档和演示可以在这里找到。

---

编辑:
也许jQuery UI Pulsate Effect 更适合，参见这里

---

编辑 #2:
要调整不透明度，您可以这样做：

$("div").click(function() {
  // do fading 3 times
  for(i=0;i<3;i++) {
    $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0);
  }
});

…所以它的不透明度不会低于50%。

- sled

---

Pulsate是我正在寻找的。非常感谢。只是，有没有办法阻止它完全消失。比如说只淡出到50%的不透明度？也许只需要多次链接高亮效果？ - ZolaKt

Answer 2

看一下http://jqueryui.com/demos/effect/，它有一个名为pulsate的效果，可以完全符合你的需求。

$("#trigger").change(function() {$("#div_you_want_to_blink").effect("pulsate");});

- Alternegro

Answer 3

我创建了一个自定义的闪烁效果，它使用了 setInterval 和 fadeTo

HTML -

<div id="box">Box</div>

JS -

setInterval(function(){blink()}, 1000);


    function blink() {
        $("#box").fadeTo(100, 0.1).fadeTo(200, 1.0);
    }

简单至极。 http://jsfiddle.net/Ajey/25Wfn/

- Ajey

---

完全正常！不需要 JQuery UI。 - Pavel Vlasov

非常棒的解决方案！使用 JQuery 无任何问题。感谢。 - Digital site

这是最佳解决方案！ - NoWar

这里最好的解决方案！ - w3spi

Answer 4

如果你还没有使用Jquery UI库，而你想要模仿这个效果，你可以做的非常简单。

$('#blinkElement').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100);

您还可以尝试调整数字以获得更适合您设计的更快或更慢的速度。

这也可以是一个全局jQuery函数，因此您可以在整个网站上使用相同的效果。另请注意，如果您将此代码放入for循环中，您可以拥有100万次脉冲，因此您不受默认值6或其他默认值的限制。

编辑： 将此添加为全局jQuery函数

$.fn.Blink = function (interval = 100, iterate = 1) {
    for (i = 1; i <= iterate; i++)
        $(this).fadeOut(interval).fadeIn(interval);
}

使用以下内容可以轻松地闪烁您网站上的任何元素

$('#myElement').Blink(); // Will Blink once

$('#myElement').Blink(500); // Will Blink once, but slowly

$('#myElement').Blink(100, 50); // Will Blink 50 times once

- Clayton C

Answer 5

对于那些不想要包含整个jQuery UI的人，可以使用jQuery.pulse.js代替。

若要进行循环动画以改变透明度，请执行以下操作：

$('#target').pulse({opacity: 0.8}, {duration : 100, pulses : 5});

它很轻量级（少于1kb），并允许您循环任何类型的动画。

- lulalala

---

仍需要jQuery UI“Effects”。 - Jerome Jaglale

@JeromeJaglale 我使用的是不带jQuery UI的版本，因为透明度的变化可以仅通过jQuery实现。除非你在使用jQuery UI特定的动画效果，否则你也应该可以这样做。 - lulalala

好的观点。我被第一个演示（文本闪烁红色）误导了，它需要jQuery UI Effects。 - Jerome Jaglale

注意：你只需要包含 jquery.color.js 来处理颜色相关的内容。 - Dave

Answer 6

由于我没有看到任何不需要额外库的基于jQuery的解决方案，因此这里提供一个比使用fadeIn/fadeOut更灵活一些的简单解决方案。

$.fn.blink = function (count) {
    var $this = $(this);

    count = count - 1 || 0;

    $this.animate({opacity: .25}, 100, function () {
        $this.animate({opacity: 1}, 100, function () {
            if (count > 0) {
                $this.blink(count);
            }
        });
    });
};

像这样使用它

$('#element').blink(3); // 3 Times.

- Daniel Iser

Answer 7

你可能需要了解jQuery UI。具体来说，是高亮效果： http://jqueryui.com/demos/effect/

- ghoppe

Answer 8

我使用不同的预定义颜色，如下所示：

theme = {
    whateverFlashColor: '#ffffaa',
    whateverElseFlashColor: '#bbffaa',
    whateverElseThenFlashColor: '#ffffff',
};

并像这样使用它们。

$('#element').effect("highlight", {color:theme.whateverFlashColor}, 1000);

简单 :)

- metamagikum

Answer 9

只需给elem.fadeOut(10).fadeIn(10);

- ibsenv

---

FadeOut / FadeIn 隐藏 / 显示元素，这不是我要寻找的。我需要增加/减少颜色的透明度而不隐藏元素。 - ZolaKt

不是的，elem.show().hide()可以做到那个效果。fadeOut/fadeIn改变的是透明度。你可以调整fadeOut/fadeIn的持续时间来获得所需的效果。不过它会隐藏元素。 - ibsenv

Answer 10

尝试使用jquery.blink.js插件：

https://github.com/webarthur/jquery-blink

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="/path/to/jquery.blink.js"></script>

<script>
jQuery('span').blink({color:'white'}, {color:'black'}, 50);
</script>

#享受！

- Arthur Ronconi