Flash an element without the overhead of jQueryUI?

Question

I was reading this question about how to make an element "flash" in jQuery, however, the most popular answers relied on jQueryUI which is pretty large to include in a project if all I need is the backgroundColor to animate. Is there a way to flash an element's background color in a similar manner without using jQueryUI?

To accomplish this "flash" you only need ui effects core and the ui effect. jQuery UI is designed to be used in pieces for this reason, you don't need all the code for widgets if you aren't using them... — gnarf, Oct 21 '11 at 18:53
Possible duplicate of [How do you make an element "flash" in jQuery](https://stackoverflow.com/questions/275931/how-do-you-make-an-element-flash-in-jquery) — cweiske, Aug 07 '18 at 12:10

score 2 · Accepted Answer · answered Oct 21 '11 at 18:45

2

you can write a function that contains a for loop with some delay in each cycle. In each cycle of the loop, you can decrease/increase the color value and set it as the background. This gives the same effect as that of animate.

answered Oct 21 '11 at 18:45

Vivek Viswanathan

1,968
18
26

1

You need to use setInterval() or setTimeout() to do the delay, to avoid blocking the UI. – JeffSahol Oct 21 '11 at 18:50

score 1 · Answer 2 · edited Dec 18 '11 at 10:48

1

Something like this should work (I hope).

function flash($element, times) {
  var colors = ['#fff', '#000'];
  $element.css('background-color', colors[times % colors.length]);
  if (times === 0) return;
  setTimeout(function () {
    flash($element, times - 1);
  }, 500);
}

Use it on an element like this: flash($('#some_element'), 5)

edited Dec 18 '11 at 10:48

Community

1
1

answered Oct 21 '11 at 18:50

Markus Hedlund

23,374
22
80
109

score 0 · Answer 3 · answered Oct 21 '11 at 18:55

0

One way:

setInterval(function(){
  $('#hello').css('background-color', 'red');
}, 100);

setInterval(function(){
  $('#hello').css('background-color', 'green');
}, 150);

DEMO

answered Oct 21 '11 at 18:55

Sarfraz

377,238
77
533
578

Bad way. These two intervals would easily go out of sync with each other. It would be better to use just one which toggles the effect using a boolean or such. – Clox Oct 24 '16 at 12:36

score -2 · Answer 4 · answered Oct 21 '11 at 18:49

-2

After a bit of searching through the answers on that page, I found a link to a jQuery workaround that allows one to call a function .highlight() on a jQuery element. While jQuery is needed, jQueryUI is not.

answered Oct 21 '11 at 18:49

Ivan

10,052
12
47
78

1

if this answers your own question you can still mark it as such. also I think jquery ui relays on "effects.js" to make that work. so if jquery didn't do it on its on you might look at effects. – Eonasdan Oct 21 '11 at 18:54

Flash an element without the overhead of jQueryUI?

4 Answers4