使用 jquery 实现闪光效果

Posted

技术标签:

【中文标题】使用 jquery 实现闪光效果【英文标题】：flash effect with jquery 【发布时间】：2011-06-28 20:10:11 【问题描述】：

我想用jQuery来淡入淡出backgroud-color，我试过下面的代码，它会影响整个div内容，我只需要为backgroud-color添加flash效果。

   $('.countbox').css("background-color","#FF0000").fadeIn("fast").delay(800)
    .fadeout("fast");
<div class="countbox">checkout</div>

我也试过这个，但它不起作用！ 

$('.countbox').css("background-color","#FF0000").fadeIn("fast").delay(800).css("background-color","#FFFFFF");

任何人都可以帮助我的问题是什么！

编辑

哎呀！ 我的回答不适用于所有窗口。哪一个只为当前窗口提供闪光效果，但我需要为所有窗口提供闪光效果。 例如 ：- 当我点击按钮时，它应该给我所有窗口的 div 闪光效果，就像在这个 website 中一样。

【问题讨论】：

您是否将“window”与“div”混淆了？ AFAIK，您的意思是您希望所有具有特定 CSS 样式的元素都具有闪光效果。 我不是在谈论多个 div... 这是关于浏览器窗口的。你可以在这里看到闪电拍卖...beezid.com ..当点击出价按钮时，这种效果适用..这就是我想要的 那么，您想在 所有 正在查看特定网页的打开的浏览器（整个 Internet）上“闪现”一些东西吗？就像那个拍卖页面一样，当有人出价时，它会在所有浏览该页面的浏览器上闪烁？或者像 Stack Overflow 一样，当有人添加新答案时会闪烁一条消息？恐怕你当时问错了问题。这需要 XHR/Ajax。 任务#1：重写你的问题。你问错问题了。任务#2：给予更高的赏金。这是一种重要的解决方案，没有多少人会花时间教你如何做到这一点而无需获得巨额奖励。 大喊不会让你到任何地方... 【参考方案1】：

如您在 cmets 中提到的那样，要在单独的窗口中执行此操作，您需要对服务器进行某种回发，以表明何时会发生这种情况。

扩展 omerkirk 的答案（这是执行此 IMO 的正确方法）。

做一个 setInterval(function().get(););定期从一些存储当前状态的后台服务器获取信息（每个用户可能......）。当当前状态发生变化时，在当前窗口的背景上执行.animate(); 以匹配后台服务器的背景...

如果您有多个“驱动”窗口而不是只有一个主窗口和 x 个客户端窗口，这可能会变得非常棘手和成问题...

IMO 真的这是个坏主意……

【讨论】：

这是正确的。如果您尝试跨浏览器窗口执行此操作，则需要某种类型的回发系统来执行更新，以及在需要时同步闪烁的方法。【参考方案2】：

考虑 DrJokePu 的回答 jQuery animate backgroundColor

【讨论】：

【参考方案3】：

根据 cmets 更新答案

这将比您希望的要多一些工作。您将需要一个包含 2 个表的数据库。表将保存活动会话 ID，表 2 将保存消息：

tblSessions
   ID            Int
   LastSeen      DateTime
   SessionID     Varchar(255)

tblMessages
   ID            Int
   Timestamp     DateTime
   SessionID     Varchar(255)
   Message       Varchar(255)

当访问者访问您的页面时，您需要检查访问者是否具有会话 ID。如果访问者已经拥有会话 ID，请更新 tblSessions 表中的 LastSeen 列。如果访问者没有会话 ID，请将其分配并添加到 tblSessions 表中。此代码应在加载时在所有页面上运行。

您需要对数据库表tblSessions 运行查询，以删除所有LastSeen 早于X 时间的条目。 X 的值应该是 5 分钟。此查询可以在每个页面加载的顶部运行，也可以在服务器后端进程中运行。

现在，任何时候您想要让每个人的屏幕都闪烁，您可以在tblMessages 中为tblSessions 中的每个条目添加一个条目。将Timestamp设置为您发送消息的时间，并将消息设置为“flash”。

在 javascript 中的浏览器端，使用setInterval 设置轮询功能。在您的轮询函数中，将 ajax 脚本调用到服务器端页面以返回任何消息。此服务器端脚本应查询 tblMessages 以获取当前会话 ID 的任何条目并将它们传回。它还应该从表中删除条目。

返回您的 javascript 轮询函数，您可以检查“Flash”消息并闪烁屏幕。轮询函数被调用的频率越高，访问者的实时就越多，但更多的负载会在你的服务器上。

就像tbleSessions 表一样，您需要从tblMessages 表中删除旧条目，如果它们超过 X +1 分钟时间，否则您会在表中得到旧的结果，这可能会导致问题向下路。

所以.. 这将使访问您页面的任何人的屏幕几乎同时闪烁。我之所以粗略地说是因为没有办法在完全相同的时间闪烁网络延迟，而且每个人的投票时间都略有不同......无论如何都不是简单的方法。

【讨论】：

每个人的回答都一样，但我的问题不同，请检查我的编辑部分...是的，您的代码工作正常，但 Flash 效果不会影响所有浏览器窗口。检查 stephen chung 的评论就是这样我在找！ 答案已更新为同时刷新每个访问者的页面。【参考方案4】：

这是一个迟到的答案，我发现你的帖子试图找到我自己的项目^^，我不久前开发了一个 jQuery 插件，它完全可以满足你的需求。

使用非常简单：

$("selector").flash()

当然有一些可能的配置。

查看演示并随意使用/fork。

https://github.com/MarechJ/jQuery.flash

【讨论】：

【参考方案5】：

您不能为background-color 的opacity 设置动画。您只能为其颜色设置动画。

Check this plugin.

【讨论】：

你好亚历克斯，请检查我的编辑..我想要所有窗口的闪光效果..我希望你一定有想法！【参考方案6】：

这对我有用，无需任何插件

$('.countbox').css("background-color","#FF0000");
setTimeout(function()  $('.countbox').css("background-color","#FFFFFF"); ,800);

我们也可以使用 setInterval 在这个方法中随机创建颜色来连续闪烁颜色。

【讨论】：

你的问题回答了吗？ 是的，以前是这样，但它不适用于所有浏览器窗口，这是我的问题！【参考方案7】：

这应该可行。 Jquery 有自己的动画功能，您不必使用任何插件。

$(".countbox").animate(backgroundColor: "#ff0000", 1000);

这应该会在 1000 毫秒（1 秒）内将背景颜色从其初始值设置为 #ff0000。我认为您应该包含来自 jQueryUI 的动画包。

希望对你有帮助

【讨论】：

omerkirk 我已经试过了。是的，它适用于当前窗口，但不能同时在其他窗口中点击按钮，请检查我的编辑 @gowri 我不太确定您对所有窗口的含义（浏览器窗口？还是同一页面上的多个元素？）如果您指的是所有浏览器窗口，那么我认为这是不可能的。如果您的意思是同一个窗口上有多个元素，那么它应该可以工作，我只是在具有相同类的多个 div 上尝试过它，它就像一个魅力。如果您使用无效代码的示例编辑您的帖子，也许我们可以解决您的问题。 我们来了，beezid.com 在这个网站上任何人都提出了出价，当我点击它时，它会为 div 应用闪光效果......我的意思是我需要看到闪光效果在所有浏览器窗口中......【参考方案8】：

这就是你要找的吗？请看演示：

http://jsfiddle.net/naveed_ahmad/GbvGU/

【讨论】：

它不会影响所有浏览器窗口 那为什么不使用scriptaculous呢？这是链接：madrobby.github.com/scriptaculous/effect-highlight 附言。您提到的网站使用的是相同的 scriptaculous。【参考方案9】：

为了flash客户端（单浏览器）的背景，可以使用jquery.animate()。您将在回调中使用它，或者在它必须 flash 时将其用作函数。 由于您希望 flash 在整个 Internet 上发生，您需要在所有打开的浏览器上运行此动画。有两种方法可以做到这一点。

    在客户端设置超时 将检查服务器数据是否 它应该闪烁，或者不。的缺点 这样做是你必须投票 如果你想要“几乎 实时”数据，并且闪存不会 同时发生 每个人。 您发起一个服务器端回调，当数据发生更改时，它将通知所有打开的客户端到 flash，但是如果没有服务器端逻辑，您将无法做到这一点。要使用 ASP.NET 网页执行此操作，请阅读此 http://msdn.microsoft.com/en-us/library/ms178208.aspx

【讨论】：

以上是关于使用 jquery 实现闪光效果的主要内容，如果未能解决你的问题，请参考以下文章

Cocos Creator3.x实现拍照闪光灯效果

Cocos Creator3.x实现拍照闪光灯效果

css 闪光效果 - 在标题等中使用闪光级别

如何获得像屏幕捕获效果一样的屏幕闪光效果？

闪光效果不适用于高度 wrap_content

Android 圆角闪光遮照效果