Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery "blinking highlight" effect on div?

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

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.

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.

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

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.

like image 828
ZolaKt Avatar asked Mar 05 '11 17:03

ZolaKt


2 Answers

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

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

The documentation and demo can be found here


Edit:
Maybe the jQuery UI Pulsate Effect is more appropriate, see here


Edit #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);
  }
});

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

like image 55
sled Avatar answered Nov 12 '22 19:11

sled


Take a look at http://jqueryui.com/demos/effect/. It has an effect named pulsate that will do exactly what you want.

$("#trigger").change(function() {$("#div_you_want_to_blink").effect("pulsate");});
like image 35
Alternegro Avatar answered Nov 12 '22 21:11

Alternegro