jQuery“闪烁高亮”效果对div？ [英] jQuery "blinking highlight" effect on div?

问题描述

我正在寻找一种方法来执行以下操作。

I'm looking for a way to do the following.

我添加了一个< div> 到一个页面，并且ajax回调返回一些值。 < div> 用来自ajax调用的值填充，然后< div> 另一个< div> ，作为表列。

I add a <div> to a page, and an ajax callback returns some value. The <div> is filled with values from the ajax call, and the <div> is then prepended to another <div>, which acts as a table column.

我想获得用户的关注，

我想让< div> 闪烁，不要显示/隐藏，但要显示在页面上有新的东西。要突出/取消高亮一段时间，让我们说5秒。

I would like to get the user's attention, to show her/him that there is something new on the page.
I want the <div> to blink, not show/hide, but to highlight/unhighlight for some time, lets say 5 seconds.

我一直在看着blink插件，但据我所见，它只显示/隐藏对于一个元素。

I have been looking at the blink plugin, but as far as I can see it only does show/hide on an element.

Btw，解决方案必须是跨浏览器，是的，IE不幸包括。我可能需要进行一些小的工作，在IE中，但总体来说它必须工作。

Btw, the solution has to be cross-browser, and yes, IE unfortunately included. I will probably have to hack a little to get it working in IE, but overall it has to work.

推荐答案

jQuery UI效果是你要找的。

jQuery UI Highlight Effect is what you're looking for.

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

可以找到文档和演示此处

编辑：

也许脉动效果更合适，请参阅此处

Maybe the Pulsate Effect is more appropriate, see here

编辑＃2

要调整不透明度，您可以执行以下操作：

To adjust the opacity you could do this:

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

因此它不会低于50％的不透明度。

So it won't go any lower than 50% opacity.

这篇关于jQuery“闪烁高亮”效果对div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！