flash effect with jquery

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开发者_StackOverflow社区>

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.

---

to do this in separate windows as you're mentioning in your comments, you will need to have some sort of postback to a server to signal when this will happen.

extending omerkirk's answer (which is the correct way to do this IMO).

do an setInterval(function(){.get();}); that periodicially gets information from some background server that stores the current state (per user probably...). When the current state changes, you do the .animate(); on the current window's background to match that of the background server...

This can get very tricky and problematic if you have multiple 'driving' windows instead of just one master window and x client ones...

Really this is a bad idea IMO...

---

Consider DrJokePu's answer at jQuery animate backgroundColor

---

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.

---

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

---

You can't animate background-color's opacity. You can animate its colour only.

Check this plugin.

---

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 .

---

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

---

is that what you're looking for? Please see the demo:

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

---

In order to flash the background on the client (single browser), you can use jquery .animate(). You will use this on the callback or as a function when it has to flash.
As you want the flash to happen all over the Internet you will need to run this animation on all open browsers. There are 2 ways to do it.

1. set a timeout on the client which will check the server data whether it should flash, or not. the down-sides of doing this are that you have to poll quite often if you want "almost live" data, and the flash will not happen in the same time for everyone.
2. you rise a server side callback, which will notify all open clients to flash, when the data has changed, but you won't be able to do that without server side logic. to do this with ASP.NET Web Pages read this http://msdn.microsoft.com/en-us/library/ms178208.aspx