jquery的闪光效果

发布于 2024-10-18 04:46:04 字数 637 浏览 2 评论 0原文

我想要使用 jQuery 淡入和淡出背景颜色，我尝试了下面的代码，它会影响整个 div 内容，我只需要为背景颜色添加闪光效果。

   $('.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 提供 Flash 效果，就像这个网站中一样。

原文

I want fadeIn and fadeout backgroud-color using jQuery, I tried below code, It's affect the full div content , I need to add flash effect only for backgroud-color.

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

I tried this on also but it's not working!

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

What's the problem anyone can help me !

Edit

oops!
my answer not applying to all window. Which one only giving flash effect for current window but I need to get the flash effect for all window.
for example :-
When I click on button, it should give me flash effect for div for all windows, exactly like in this website.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

待天淡蓝洁白时 2024-10-25 04:46:04

正如您在评论中提到的那样，要在单独的窗口中执行此操作，您将需要向服务器进行某种回发以发出何时发生这种情况的信号。

扩展 omerkirk 的答案（在我看来，这是执行此操作的正确方法）。

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

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

在我看来，这确实是一个坏主意...

回复收藏 0 原文

土豪 2024-10-25 04:46:04

考虑 DrJokePu 的回答
jQuery 动画背景颜色

回复收藏 0 原文

行雁书 2024-10-25 04:46:04

根据评论更新答案

这可能比您想要的要多一些工作。您将需要一个包含 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 中的每个条目添加一个条目。将时间戳设置为发送消息的时间，并将消息设置为“flash”。

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

回到 JavaScript 轮询功能，您可以检查“Flash”消息并闪烁屏幕。轮询函数调用的频率越高，访问者的实时性就越高，但是服务器上的负载也会增加。

就像 tbleSessions 表一样，如果旧条目超过 X +1 分钟时间，您将需要从 tblMessages 表中删除旧条目，否则您将在表可能会导致问题。

所以......这将为访问您页面的任何人大致在同一时间闪烁屏幕。我说粗略是因为没有办法在网络延迟的情况下在完全相同的时间闪烁，并且每个人轮询的时间都略有不同......好吧，无论如何都没有简单的方法。

Answer updated based on comments

This is going to be a little more work than you probably wanted it to be. You will need a database with 2 tables. Table will will hold active sessions IDs and table 2 will hold messages:

tblSessions
   ID            Int
   LastSeen      DateTime
   SessionID     Varchar(255)

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

When a visitor comes to your page, you need to check if the visitor has a session ID. If the visitor does have a session ID already, update the LastSeen column in the tblSessions table. If the visitor doesn't have a session ID, assign on and add it to the tblSessions table. This code should be run on all your pages when they are loaded.

You will need to run a query on the database table tblSessions to remove all entries that have a LastSeen older than some X time. The value of X should be say 5 min. This query could be run at the top of each page load, or in a server backend process.

Now, anytime you want to flash everyone's screens, you add an entry in tblMessages for each entry in tblSessions. Set the Timestamp to the time you send the message, and set Message to "flash".

On the browsers side in javascript, setup a polling function with setInterval. In your polling functions call an ajax script to a server side page to return any messages. This server side script should query the tblMessages for any entries for the current session ID and pass them back. It should also remove the entries from the table.

Back in your javascript polling function you can check for the "Flash" message and flash the screen. The more frequently the polling function is called the more realtime your visitor will be, but more of a load will be but on your server.

Just like with the tbleSessions table, you will want to remove old entries from the tblMessages table if they are over say X +1 min time or you will get old results in the table that can cause issues down the road.

So.. This will flash the screen for anyone visiting your page, at roughly the same time. I say roughly because there is no way to flash at exactly the same time with network lag and everyone polling at slightly different times.... Well no easy way at any rate.

回复收藏 0 原文

一枫情书 2024-10-25 04:46:04

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

它非常容易使用：

$("selector").flash()

当然可以进行一些配置。

检查演示并随意使用/分叉。

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

It's a late answer, I found your post trying to find my own project ^^, I developed, a while ago, a jQuery plugin that does exactly what you want to do.

It's very easy to use:

$("selector").flash()

Of course there is some configuration possible.

Check the demo and feel free to use/fork.

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

回复收藏 0 原文

忆梦 2024-10-25 04:46:04

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

检查这个插件。

回复收藏 0 原文

差↓一点笑了 2024-10-25 04:46:04

这对我来说不需要任何插件，

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

我们还可以使用 setInterval 在此方法中随机创建的颜色来连续颜色闪烁。

This works for me without any plugin

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

we can also continuous color flashing using setInterval with randomly created colors inside this method .

回复收藏 0 原文

疑心病 2024-10-25 04:46:04

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

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

这应该在 1000 毫秒（1 秒）内将背景颜色从初始值动画化为 #ff0000。我认为你应该包含 jQueryUI 的动画包。

希望有帮助

This should work. Jquery has an animate function of its own you don't have to use any plugin.

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

This should animate your background color from its initial value to #ff0000 in 1000 ms(1 second). I think you should include the animation package from jQueryUI.

Hope it helps

回复收藏 0 原文

握住你手 2024-10-25 04:46:04

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

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

回复收藏 0 原文

我做我的改变 2024-10-25 04:46:04

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

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