11

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.

Artjom B.
  • 61,146
  • 24
  • 125
  • 222
Gowri
  • 16,587
  • 26
  • 100
  • 160
  • Are you confusing "window" with "div"? AFAIK, you mean you want the flash effect for all elements with a particular CSS style. – Stephen Chung Apr 18 '11 at 08:51
  • i am not talking about multiple divs... this about browser window. you can see the flash auction here ... http://www.beezid.com/ .. that effect applies when some click on bid button ..thats what i want – Gowri Apr 18 '11 at 09:05
  • 2
    So, you want something to "flash" on **all** open browsers (all over the Internet) which is viewing that particular web page? Like that auctioning page, which flashes on all browsers viewing that page when somebody placed a bid? Or like Stack Overflow which flashes a message when somebody has added a new answer? I'm afraid you have asked the wrong question then. This requires XHR/Ajax. – Stephen Chung Apr 18 '11 at 09:21
  • THATS WHANT I NEED EXACTLY HOW CAN I DO THIS – Gowri Apr 18 '11 at 09:26
  • 4
    Task #1: rewrite your question. You have asked the wrong question. Task #2: Give a higher bounty. This is a non-trivial type of solution, and not a lot of people would spend time teaching you how to do this withou some huge award. – Stephen Chung Apr 18 '11 at 09:29
  • @Gowri - What language is your backend written in? – Justin808 Apr 19 '11 at 03:56
  • @gowri - see my updated answer. It tells you what you need to do, not including specific code to do it. – Justin808 Apr 19 '11 at 04:17
  • 1
    shouting wont get you anywhere... – g19fanatic Apr 19 '11 at 11:00
  • i tried all suggestions but not yet – Gowri Apr 19 '11 at 11:11
  • gowri, actually... my solution will work... I'm just not doing all of the work for you... its not a simple problem, but the answer is there. – g19fanatic Apr 19 '11 at 14:20
  • @gowri what is the need for auction tag in this question? – Ram Jun 02 '15 at 21:20

9 Answers9

5

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...

g19fanatic
  • 10,567
  • 6
  • 33
  • 63
  • 1
    This is correct. If you are trying to do this across browser windows, you will need some type of postback system to do the update, along with a way to synchronize the blinking if that is desired. – Philip Hanson Apr 15 '11 at 14:27
1

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

Maresh
  • 4,644
  • 25
  • 30
1

Consider DrJokePu's answer at jQuery animate backgroundColor

Community
  • 1
  • 1
bcm
  • 5,470
  • 10
  • 59
  • 92
1

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.

Justin808
  • 20,859
  • 46
  • 160
  • 265
  • everybody answering the same but my question is different please check my edit part ... yes your code works fine but the flash effect not affect the all browser windows.. check stephen chung 's comment thats what i am looking for ! – Gowri Apr 19 '11 at 03:43
  • Answer updated to flash every visitor's page at ruffly the same time. – Justin808 Apr 19 '11 at 04:17
0

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

Check this plugin.

alex
  • 479,566
  • 201
  • 878
  • 984
  • Hello alex , please check my edit .. i want the flash effect for all window .. i hope you must have idea ! – Gowri Apr 12 '11 at 11:28
0

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 .

Gowri
  • 16,587
  • 26
  • 100
  • 160
0

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

omerkirk
  • 2,527
  • 1
  • 17
  • 9
  • omerkirk i already tried that .yes it works on current window but not in other window at the same time the button clicked please check my edit – Gowri Apr 12 '11 at 11:47
  • @gowri I am not really sure what you mean for all windows( browser windows ? or multiple elements on the same page ?) if you mean all browser windows then I don't think that is possible. If you mean multiple elements on the same window then it should work, I just tried it on multiple divs with the same class and it worked like a charm. If you edit your post with an example for the non working code maybe we can solve your problem. – omerkirk Apr 14 '11 at 08:35
  • here we go,http://www.beezid.com/ in this website anyone place the bid the flash effect is applied for the div when i click it gives the same effect ... i mean i need to see the flash effect in all browser windows ...... – Gowri Apr 14 '11 at 09:27
0

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

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

Naveed Ahmad
  • 3,176
  • 1
  • 15
  • 18
0

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
rucsi
  • 516
  • 2
  • 7