jQuery "blinking highlight" effect on div?

Question

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.

Solution 1

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.

Solution 2

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");});

Solution 3

This is a custom blink effect I created, which uses setInterval and fadeTo

HTML -

<div id="box">Box</div>

JS -

setInterval(function(){blink()}, 1000);


    function blink() {
        $("#box").fadeTo(100, 0.1).fadeTo(200, 1.0);
    }

As simple as it gets.

http://jsfiddle.net/Ajey/25Wfn/

Solution 4

If you are not already using the Jquery UI library and you want to mimic the effect what you can do is very simple

$('#blinkElement').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100);

you can also play around with the numbers to get a faster or slower one to fit your design better.

This can also be a global jquery function so you can use the same effect across the site. Also note that if you put this code in a for loop you can have 1 milion pulses so therefore you are not restricted to the default 6 or how much the default is.

EDIT: Adding this as a global jQuery function

$.fn.Blink = function (interval = 100, iterate = 1) {
    for (i = 1; i <= iterate; i++)
        $(this).fadeOut(interval).fadeIn(interval);
}

Blink any element easily from your site using the following

$('#myElement').Blink(); // Will Blink once

$('#myElement').Blink(500); // Will Blink once, but slowly

$('#myElement').Blink(100, 50); // Will Blink 50 times once

Solution 5

For those who do not want to include the whole of jQuery UI, you can use jQuery.pulse.js instead.

To have looping animation of changing opacity, do this:

$('#target').pulse({opacity: 0.8}, {duration : 100, pulses : 5});

It is light (less than 1kb), and allows you to loop any kind of animations.

View more solutions

Comments

[ZolaKt]

Pulsate is what I'm looking for. Thanks a lot. Just, is there anyway to stop it from fading completely. Just to fade lets say to 50% opacity? Maybe just to chain highlight effect a few times?

[Jerome Jaglale]

Still requires jQuery UI "Effects"

[lulalala]

@JeromeJaglale I use it without jQuery UI, since opacity changing can be done in jQuery alone. It should be the same for you, unless you are using jQuery UI specific animations.

[Jerome Jaglale]

Good point. I was misled by the first demo (text pulsing red) which requires jQuery UI Effects.

[ZolaKt]

FadeOut/FadeIn hides/show the element in the end which is not what I was looking for. I needed to increase/decrease color opacity without hiding the element

[ibsenv]

Nope, elem.show().hide() does that. FadeOut/FadeIn changes the opactity. You can fiddle with the duration of fadeOut/fadeIn to get the required effect. It hides the elem once though.

[Pavel Vlasov]

Works just fine! And no JQuery UI needed.

[Digital site]

great solution! works without any issues using Jquery. Thanks

[Dave]

Just a note. You only need to include jquery.color.js for the color stuff.

[NoWar]

It is the best solution here!

[w3spi]

The best solution here !