How do you make an element "flash" in jQuery

Question

I'm brand new to jQuery and have some experience using Prototype. In Prototype, there is a method to "flash" an element — ie. briefly highlight it in another color and have it fade back to normal so that the user's eye is drawn to it. Is there such a method in jQuery? I see fadeIn, fadeOut, and animate, but I don't see anything like "flash". Perhaps one of these three can be used with appropriate inputs?

This doesn't answer the OP, but the (loosely tested) code may be useful to future google searchers (such as myself): `$.fn.flash = function(times, duration) { var T = this; times = times || 3; duration = duration || 200; for ( var i=0; i < times; i++ ) { (function() { setTimeout(function() { T.fadeOut(duration, function() { T.fadeIn(duration); }); }, i*duration*2+50); })(i); } };` — Cory Mawhorter, Mar 22 '12 at 21:02
add this css to the element : `text-decoration:blink`, then remove it. — Rafael Herscovici, Nov 29 '12 at 14:34
I put a JSFiddle demo here that I think is a better answer than I found on this page: https://stackoverflow.com/a/52283660/470749 — Ryan, Sep 11 '18 at 20:22
Please note that **_blink_** is officially deprecated in favor of animations. Check at: [w3.org/TR/2019/CR-css-text-decor-3-20190813/#valdef-text-decoration-line-blink](https://www.w3.org/TR/2019/CR-css-text-decor-3-20190813/#valdef-text-decoration-line-blink) — OrizG, Aug 22 '19 at 23:09

score 386 · Answer 1 · edited Jan 13 '20 at 13:16

386

My way is .fadein, .fadeout .fadein, .fadeout ......

$("#someElement").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);

function go1() { $("#demo1").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100)}

function go2() { $('#demo2').delay(100).fadeOut().fadeIn('slow') }

#demo1,
#demo2 {
  text-align: center;
  font-family: Helvetica;
  background: IndianRed;
  height: 50px;
  line-height: 50px;
  width: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="go1()">Click Me</button>
<div id='demo1'>My Element</div>
<br>
<button onclick="go2()">Click Me</button> (from comment)
<div id='demo2'>My Element</div>

edited Jan 13 '20 at 13:16

ashleedawg

20,365
9
72
105

answered Feb 01 '12 at 14:19

etlds

5,810
2
23
30

14

Not the most beautiful solution, but short, easy to understand, and doesn't require UI/effects. Nice! – Chris Jaynes Aug 13 '12 at 15:19
27

i use a delay before the fadeIn, fadeOut sequence, something like `$('..').delay(100).fadeOut().fadeIn('slow')` – alexandru.topliceanu Aug 30 '12 at 14:34
1

flashing backgrounds often look tacky, or just plain jarring - especially if the item you're flashing is sitting on a plain white background. try this first before adding color plugins and trying to flash backgrounds etc. – Simon_Weaver Jun 30 '13 at 06:19
5

The problem with this method is these events are potentially stepping on each other. You should probably put each subsequent fadeIn and fadeOut in their respective callbacks. For example: `var $someElement = $("#someElement"); $someElement.fadeIn(100, function(){ $someElement.fadeOut(100, function(){ /*...etc...*/ }) })` – thekingoftruth Sep 30 '13 at 20:39
Beware using this in validation code that might be called frequently. If the code is called with the right timing you might wind up with an element showing when it shouldn't (or vice versa) – Chris Pfohl Oct 14 '14 at 17:46

score 126 · Answer 2 · edited Aug 09 '16 at 11:17

126

You can use the jQuery Color plugin.

For example, to draw attention to all the divs on your page, you could use the following code:

$("div").stop().css("background-color", "#FFFF9C")
    .animate({ backgroundColor: "#FFFFFF"}, 1500);

Edit - New and improved

The following uses the same technique as above, but it has the added benefits of:

parameterized highlight color and duration
retaining original background color, instead of assuming that it is white
being an extension of jQuery, so you can use it on any object

Extend the jQuery Object:

var notLocked = true;
$.fn.animateHighlight = function(highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    var originalBg = this.css("backgroundColor");
    if (notLocked) {
        notLocked = false;
        this.stop().css("background-color", highlightBg)
            .animate({backgroundColor: originalBg}, animateMs);
        setTimeout( function() { notLocked = true; }, animateMs);
    }
};

Usage example:

$("div").animateHighlight("#dd0000", 1000);

edited Aug 09 '16 at 11:17

Cheekysoft

35,194
20
73
86

answered Jul 17 '09 at 21:13

curthipster

3,661
3
24
18

1

Unfortunately, there is a bug in jQuery that intermittently prevents the color from changing -> http://dev.jqueryui.com/ticket/4251 – curthipster Jul 17 '09 at 21:37
1

this is quite versatile (you can animate any property, like color, instead of backgroundColor). In fact there is a bug, but if this effect is for eye-candy only, it is sufficient to wrap the call with a try-catch block: if it fails, it won't show, but it won't produce errors either. – Palantir Oct 14 '09 at 07:14
1

If anyone is wondering... this was does work now! (tested in FF, Safari, Chrome) – Ryan Ferretti Oct 18 '10 at 21:01
5

Doesn't work for me either - are you sure this isn't relying on the color animations plugin? http://plugins.jquery.com/project/color – UpTheCreek Dec 18 '10 at 14:58
18

From jquery docs on .animate() : *All animated properties should be a single numeric value (except as noted below); properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.)* So I guess you are utilising a plugin without realising it. – UpTheCreek Dec 18 '10 at 15:17
1

@UpTheCreek good catch. My project also depends on jQuery UI, which adds the ability to animate color (http://jqueryui.com/docs/Effects/Methods#Color_Transitions). However, as another user points out below, jQuery provides an effect called 'highlight' now, which provides the same functionality – curthipster Dec 21 '10 at 22:22
@colbeerhey: Unfortunately that highlight effect is part of JQueryUI (core effects), you can't use it with just jquery. – UpTheCreek Dec 22 '10 at 13:18
4

I noticed it didnt return an object. I tried stacking this little effect (EG: $("#qtyonhand").animateHighlight("#c3d69b", 1500).delay(1500).animateHighlight("#76923C", 5000); ) and got an error. I needed to add "return this;" to the end of the method. – Sage May 14 '11 at 12:13
1

I learned a lot about creating jquery functions thanks to your post. Thanks! – willdanceforfun Sep 14 '11 at 09:22
1

It does work. Requires jQuery UI. Also note that on browsers that support semi-transparent background colors (rgba), jQuery UI stable release does not support and will not animate correctly. Also, using `addClass('class', 1000)` will animate the element to that class. – Nick Caballero Jul 06 '12 at 02:29
Rubbish. Does not Work with latest jQuery UI. – Stephan Kristyn Aug 02 '12 at 12:21
Worked for me with jquery-1.7.2 and jquery-ui-1.8.22. – anon Aug 02 '12 at 21:22
1

You're all a bunch of haters. This works fine, make sure you don't put your function declaration inside your document.ready function. This does NOT have a dependency on jquery-ui: both the .animate() and the .stop() methods are native to jquery. – Pandincus Aug 07 '12 at 20:14
2

Official jQuery Docs say you must use the jQuery.Color() plugin for this to work: https://github.com/jquery/jquery-color – jchook Dec 12 '12 at 04:58
4

From the jquery .animate docs: `Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated.` - If you want to animate colour, you NEED jQuery UI or some other plugin. – Adam Tomat Apr 09 '13 at 07:53
What the hell, wrong information on SO with +77/-15 ? What is this? Nobody cared to edit this answer? I'm doing that right now... – MarioDS May 16 '13 at 07:48
2

I tried this with a – Menelaos Jun 27 '13 at 07:32
urm... hows about somebody that can get this working makes a jsfiddle for it? – Simon_Weaver Jun 30 '13 at 05:53
If anyone is having issues with this, please comment on what your issue is. We cannot help you if you don't give us something to work with! – Ascherer Aug 05 '13 at 02:10
Eeck! This worked in StackOverflow.com console, but not my site, nor JSFiddle! Now my vote is locked in and I can't downvote! http://jsfiddle.net/Xp4k2/ – Chloe May 12 '14 at 04:16
The code above does work, you just need to include jQuery Color plugin as the post says. – Guido Visser Feb 23 '18 at 14:52

score 108 · Answer 3 · edited Oct 16 '17 at 23:12

108

You can use css3 animations to flash an element

.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;

  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;

  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
}

@keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-webkit-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-moz-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-ms-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

And you jQuery to add the class

jQuery(selector).addClass("flash");

edited Oct 16 '17 at 23:12

coredumperror

8,471
6
33
42

answered Aug 11 '12 at 14:19

vinay

2,934
1
25
18

Nice solution, if it needs to work only once. After the class has been added, subsequently adding the class does (logically) not result in flashing the element. – simon Mar 08 '13 at 07:54
8

The best idea ever. I used a settimeout to remove the class 2 seconds after the effect – insign Aug 24 '13 at 17:44
7

Here's an example of removing the class after the animation's done so you can keep flashing it. http://jsfiddle.net/daCrosby/eTcXX/1/ – DACrosby Apr 11 '14 at 01:05
Great, that works, but note that the correct property for the background-color is 'transparent' instead of 'none' if you want to pass a style sheet validator. – Jan M Dec 16 '14 at 10:28
Chrome seemingly doesn't respond to the `-webkit` prefix anymore so a `@keyframes` at-rule is needed. – kmurph79 Dec 01 '15 at 06:51
1

Note that all modern browsers now support the regular `@keyframes` and `animation` rules, so there's no need to use any prefixed versions besides *maybe* `-webkit-` (for the Blackberry browser). – coredumperror Oct 16 '17 at 23:14
I love CSS solutions, but it's a lot of code to flash something, compared to javascript. Especially since you're using jQuery anyway. – mmarlow Sep 03 '18 at 14:44
Obvious note, but useful to mention: This will appear as if it's not working if children elements already have a background! – mavrosxristoforos Oct 26 '20 at 18:41
Modify your answer adding a delay to remove the class to allow more calls `jQuery(selector).addClass("flash").delay(1000).queue(function(){ $(this).removeClass("flash").dequeue() });` – NetVicious Jul 12 '22 at 10:14

Majal · Answer 4 · 2019-01-05T09:41:40.050

83

After 5 years... (And no additional plugin needed)

This one "pulses" it to the color you want (e.g. white) by putting a div background color behind it, and then fading the object out and in again.

HTML object (e.g. button):

<div style="background: #fff;">
  <input type="submit" class="element" value="Whatever" />
</div>

jQuery (vanilla, no other plugins):

$('.element').fadeTo(100, 0.3, function() { $(this).fadeTo(500, 1.0); });

element - class name

first number in fadeTo() - milliseconds for the transition

second number in fadeTo() - opacity of the object after fade/unfade

You may check this out in the lower right corner of this webpage: https://single.majlovesreg.one/v1/

Edit (willsteel) no duplicated selector by using $(this) and tweaked values to acutally perform a flash (as the OP requested).

edited Jan 05 '19 at 09:41

answered Apr 12 '14 at 12:20

Majal

1,635
20
31

75

`fadeTo(0000)` - Metallica – vulcan raven Nov 28 '14 at 09:43
3

Smooth as butter! Best solution of all. Thanks! – Caio Mar Jun 14 '15 at 15:40
1

how to do this infinite? – tomexsans Aug 25 '15 at 07:38
1

Example link broken. – meshy Jan 25 '18 at 14:47
Excellent and easy jQuery solution. – Jason May 01 '18 at 15:34
For some reason, fadeIn and fadeOut didn't work. But fadeTo did for me! Cheers! – NeonNatureEX Mar 21 '19 at 10:19
2

@tomexsans `$.fn.flashUnlimited=function(){$(this).fadeTo('medium',0.3,function(){$(this).fadeTo('medium',1.0,$(this).flashUnlimited);});}` You can then call it like `$('#mydiv').flashUnlimited();` - It does what Majal answered above, and calls itself again at the end of the cycle. – Jay Dadhania Sep 24 '19 at 01:17

score 47 · Answer 5 · edited Apr 05 '17 at 20:09

47

You could use the highlight effect in jQuery UI to achieve the same, I guess.

edited Apr 05 '17 at 20:09

COil

7,201
2
50
98

answered Nov 09 '08 at 14:03

Michiel Overeem

3,894
2
27
39

8

That's part of jQueryUI, which is pretty heavy, not part of the standard jQuery Library (although you could just use the UI effects core, which it relies on). – UpTheCreek Dec 22 '10 at 13:18
3

You can download just the effects core + the effect you want, which, for "highlight" + "pulsate" amounts to 12 KB. Not totally light, but not that heavy either. – Roman Starkov Sep 09 '11 at 00:49

score 46 · Answer 6 · edited Nov 26 '15 at 00:08

46

If you're using jQueryUI, there is pulsate function in UI/Effects

$("div").click(function () {
      $(this).effect("pulsate", { times:3 }, 2000);
});

http://docs.jquery.com/UI/Effects/Pulsate

edited Nov 26 '15 at 00:08

Giacomo1968

25,759
11
71
103

answered Jan 12 '11 at 18:20

SooDesuNe

9,880
10
57
91

1

@DavidYell, open a new question and post some sample code. `pulsate` works fine in Chrome. – SooDesuNe Feb 03 '11 at 02:08
Blink at every 5 seconds: setInterval(function() { $(".red-flag").effect("pulsate", { times:3 }, 2000); }, 5000); – Adrian P. Aug 09 '13 at 22:45
@all Does anyone now if this uses css3 animations and/or transform? Nice anyways (but still I prefer css3 as in one of the other answers) – Martin Meeser Jul 30 '14 at 18:02

score 18 · Answer 7 · answered Oct 09 '12 at 20:45

18

$('#district').css({opacity: 0});
$('#district').animate({opacity: 1}, 700 );

answered Oct 09 '12 at 20:45

sporkit

181
1
2

1

This is just simple and elegant. – Gra Apr 13 '14 at 08:23
While using `fadeIn` and `fadeOut` affects other sibling elements because it toggles css `display` property, look weird in my case. But this one fix the issue. Thanks, it works elegantly like a charm. – fsevenm Mar 30 '20 at 04:24

hakunin · Answer 8 · 2015-03-11T07:29:49.547

Pure jQuery solution.

(no jquery-ui/animate/color needed.)

If all you want is that yellow "flash" effect without loading jquery color:

var flash = function(elements) {
  var opacity = 100;
  var color = "255, 255, 20" // has to be in this format since we use rgba
  var interval = setInterval(function() {
    opacity -= 3;
    if (opacity <= 0) clearInterval(interval);
    $(elements).css({background: "rgba("+color+", "+opacity/100+")"});
  }, 30)
};

Above script simply does 1s yellow fadeout, perfect for letting the user know the element was was updated or something similar.

Usage:

flash($('#your-element'))

Love this solution, except the background doesn't go back to what it used to be — MrPHP, Jul 15 '18 at 06:12

score 14 · Answer 9 · answered Nov 09 '08 at 14:14

You could use this plugin (put it in a js file and use it via script-tag)

http://plugins.jquery.com/project/color

And then use something like this:

jQuery.fn.flash = function( color, duration )
{

    var current = this.css( 'color' );

    this.animate( { color: 'rgb(' + color + ')' }, duration / 2 );
    this.animate( { color: current }, duration / 2 );

}

This adds a 'flash' method to all jQuery objects:

$( '#importantElement' ).flash( '255,0,0', 1000 );

score 11 · Answer 10 · edited Jul 20 '14 at 16:03

11

You can extend Desheng Li's method further by allowing an iterations count to do multiple flashes like so:

// Extend jquery with flashing for elements
$.fn.flash = function(duration, iterations) {
    duration = duration || 1000; // Default to 1 second
    iterations = iterations || 1; // Default to 1 iteration
    var iterationDuration = Math.floor(duration / iterations);

    for (var i = 0; i < iterations; i++) {
        this.fadeOut(iterationDuration).fadeIn(iterationDuration);
    }
    return this;
}

Then you can call the method with a time and number of flashes:

$("#someElementId").flash(1000, 4); // Flash 4 times over a period of 1 second

edited Jul 20 '14 at 16:03

user1477388

20,790
32
144
264

answered Jun 15 '12 at 16:06

Rob Evans

6,750
4
39
56

Changed to `var iterationDuration = Math.floor(duration / iterations);` so that you could divide by odd numbers and made it `return this;` so that you could chain other methods after it. – user1477388 Jul 20 '14 at 16:02
This doesnt really change the color of anything though? – nights Sep 08 '14 at 11:34

score 8 · Answer 11 · answered Feb 13 '14 at 17:34

8

How about a really simple answer?

$('selector').fadeTo('fast',0).fadeTo('fast',1).fadeTo('fast',0).fadeTo('fast',1)

Blinks twice...that's all folks!

answered Feb 13 '14 at 17:34

TonyP

91
1
1

That doesn't blink in another color (which was requested) this simply fades opacity in and out. – Tim Eckel Jul 17 '17 at 14:09

score 7 · Answer 12 · answered Feb 11 '13 at 21:07

This may be a more up-to-date answer, and is shorter, as things have been consolidated somewhat since this post. Requires jquery-ui-effect-highlight.

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

http://docs.jquery.com/UI/Effects/Highlight

yPhil · Answer 13 · 2017-10-26T00:25:01.363

7

function pulse() {
    $('.blink').fadeIn(300).fadeOut(500);
}
setInterval(pulse, 1000);

edited Oct 26 '17 at 00:25

answered Jul 01 '16 at 02:48

yPhil

8,049
4
57
83

1

Exactly. Simple, and complete control over fade in and fade out. – pollaris Oct 10 '17 at 01:37

score 7 · Answer 14 · edited Sep 26 '11 at 20:34

7

I can't believe this isn't on this question yet. All you gotta do:

("#someElement").show('highlight',{color: '#C8FB5E'},'fast');

This does exactly what you want it to do, is super easy, works for both show() and hide() methods.

edited Sep 26 '11 at 20:34

Christian Specht

35,843
15
128
182

answered Sep 25 '11 at 22:42

bthemonarch

87
1
1

17

Note: for this to work, you need jquery ui's effects added. it's not part of core jQuery – travis-146 Oct 03 '11 at 19:24

score 6 · Answer 15 · answered Sep 29 '13 at 22:21

I was looking for a solution to this problem but without relying on jQuery UI.

This is what I came up with and it works for me (no plugins, just Javascript and jQuery); -- Heres the working fiddle -- http://jsfiddle.net/CriddleCraddle/yYcaY/2/

Set the current CSS parameter in your CSS file as normal css, and create a new class that just handles the parameter to change i.e. background-color, and set it to '!important' to override the default behavior. like this...

.button_flash {
background-color: #8DABFF !important;
}//This is the color to change to.

Then just use the function below and pass in the DOM element as a string, an integer for the number of times you would want the flash to occur, the class you want to change to, and an integer for delay.

Note: If you pass in an even number for the 'times' variable, you will end up with the class you started with, and if you pass an odd number you will end up with the toggled class. Both are useful for different things. I use the 'i' to change the delay time, or they would all fire at the same time and the effect would be lost.

function flashIt(element, times, klass, delay){
  for (var i=0; i < times; i++){
    setTimeout(function(){
      $(element).toggleClass(klass);
    }, delay + (300 * i));
  };
};

//Then run the following code with either another delay to delay the original start, or
// without another delay.  I have provided both options below.

//without a start delay just call
flashIt('.info_status button', 10, 'button_flash', 500)

//with a start delay just call
setTimeout(function(){
  flashIt('.info_status button', 10, 'button_flash', 500)
}, 4700);
// Just change the 4700 above to your liking for the start delay.  In this case, 
//I need about five seconds before the flash started.

score 5 · Answer 16 · answered Jul 22 '13 at 04:51

5

Found this many moons later but if anyone cares, it seems like this is a nice way to get something to flash permanently:

$( "#someDiv" ).hide();

setInterval(function(){
     $( "#someDiv" ).fadeIn(1000).fadeOut(1000);
},0)

answered Jul 22 '13 at 04:51

phillyd

51
1
1

score 5 · Answer 17 · edited May 23 '17 at 12:26

5

Would a ~~pulse effect~~(offline) JQuery plugin be appropriate for what you are looking for ?

You can add a duration for limiting the pulse effect in time.

As mentioned by J-P in the comments, there is now his updated pulse plugin.
See his GitHub repo. And here is a demo.

edited May 23 '17 at 12:26

Community

1
1

answered Nov 09 '08 at 14:03

VonC

1,262,500
529
4,410
5,250

Updated pulse plugin: http://james.padolsey.com/javascript/simple-pulse-plugin-for-jquery/ – James Dec 19 '09 at 10:06
The demo is broken, because the js library it refers to doesn't exist – PandaWood Jul 27 '12 at 04:35
@PandaWood I have restored the link to the GitHub repo and updated the demo – VonC Jul 27 '12 at 05:59

Sankglory · Answer 18 · 2012-10-30T11:01:16.860

The following codes work for me. Define two fade-in and fade-out functions and put them in each other's callback.

var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);

The following controls the times of flashes:

var count = 3;
var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { if (--count > 0) $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);

score 3 · Answer 19 · edited Jun 20 '20 at 09:12

If including a library is overkill here is a solution that is guaranteed to work.

$('div').click(function() {
    $(this).css('background-color','#FFFFCC');
    setTimeout(function() { $(this).fadeOut('slow').fadeIn('slow'); } , 1000); 
    setTimeout(function() { $(this).css('background-color','#FFFFFF'); } , 1000); 
});

Setup event trigger
Set the background color of block element
Inside setTimeout use fadeOut and fadeIn to create a little animation effect.
Inside second setTimeout reset default background color

Tested in a few browsers and it works nicely.

Roman Losev · Answer 20 · 2016-05-20T11:13:11.897

3

Like fadein / fadeout you could use animate css / delay

$(this).stop(true, true).animate({opacity: 0.1}, 100).delay(100).animate({opacity: 1}, 100).animate({opacity: 0.1}, 100).delay(100).animate({opacity: 1}, 100);

Simple and flexible

edited May 20 '16 at 11:13

answered May 20 '16 at 11:04

Roman Losev

1,911
19
26

score 3 · Answer 21 · answered Sep 25 '16 at 17:58

3

$("#someElement").fadeTo(3000, 0.3 ).fadeTo(3000, 1).fadeTo(3000, 0.3 ).fadeTo(3000, 1);

3000 is 3 seconds

From opacity 1 it is faded to 0.3, then to 1 and so on.

You can stack more of these.

Only jQuery is needed. :)

answered Sep 25 '16 at 17:58

Combine

3,894
2
27
30

score 2 · Answer 22 · answered May 12 '14 at 05:00

2

Unfortunately the top answer requires JQuery UI. http://api.jquery.com/animate/

Here is a vanilla JQuery solution

http://jsfiddle.net/EfKBg/

JS

var flash = "<div class='flash'></div>";
$(".hello").prepend(flash);
$('.flash').show().fadeOut('slow');

CSS

.flash {
    background-color: yellow;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

HTML

<div class="hello">Hello World!</div>

answered May 12 '14 at 05:00

Chloe

25,162
40
190
357

If you just make `flash` a jQuery Object, it works fine. `var flash = $("
"); $(".hello").prepend(flash); flash.show().fadeOut('slow');` – Michael Blackburn Nov 13 '14 at 20:32

score 2 · Answer 23 · edited Mar 02 '12 at 17:12

There is a workaround for the animate background bug. This gist includes an example of a simple highlight method and its use.

/* BEGIN jquery color */
  (function(jQuery){jQuery.each(['backgroundColor','borderBottomColor','borderLeftColor','borderRightColor','borderTopColor','color','outlineColor'],function(i,attr){jQuery.fx.step[attr]=function(fx){if(!fx.colorInit){fx.start=getColor(fx.elem,attr);fx.end=getRGB(fx.end);fx.colorInit=true;}
  fx.elem.style[attr]="rgb("+[Math.max(Math.min(parseInt((fx.pos*(fx.end[0]-fx.start[0]))+fx.start[0]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[1]-fx.start[1]))+fx.start[1]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[2]-fx.start[2]))+fx.start[2]),255),0)].join(",")+")";}});function getRGB(color){var result;if(color&&color.constructor==Array&&color.length==3)
  return color;if(result=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
  return[parseInt(result[1]),parseInt(result[2]),parseInt(result[3])];if(result=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
  return[parseFloat(result[1])*2.55,parseFloat(result[2])*2.55,parseFloat(result[3])*2.55];if(result=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
  return[parseInt(result[1],16),parseInt(result[2],16),parseInt(result[3],16)];if(result=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
  return[parseInt(result[1]+result[1],16),parseInt(result[2]+result[2],16),parseInt(result[3]+result[3],16)];if(result=/rgba\(0, 0, 0, 0\)/.exec(color))
  return colors['transparent'];return colors[jQuery.trim(color).toLowerCase()];}
  function getColor(elem,attr){var color;do{color=jQuery.curCSS(elem,attr);if(color!=''&&color!='transparent'||jQuery.nodeName(elem,"body"))
  break;attr="backgroundColor";}while(elem=elem.parentNode);return getRGB(color);};var colors={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0],transparent:[255,255,255]};})(jQuery);
  /* END jquery color */


  /* BEGIN highlight */
  jQuery(function() {
    $.fn.highlight = function(options) {
      options = (options) ? options : {start_color:"#ff0",end_color:"#fff",delay:1500};
      $(this).each(function() {
        $(this).stop().css({"background-color":options.start_color}).animate({"background-color":options.end_color},options.delay);
      });
    }
  });
  /* END highlight */

  /* BEGIN highlight example */
  $(".some-elements").highlight();
  /* END highlight example */

https://gist.github.com/1068231

score 1 · Answer 24 · answered Apr 08 '14 at 22:15

This one will pulsate an element's background color until a mouseover event is triggered

$.fn.pulseNotify = function(color, duration) {

var This = $(this);
console.log(This);

var pulseColor = color || "#337";
var pulseTime = duration || 3000;
var origBg = This.css("background-color");
var stop = false;

This.bind('mouseover.flashPulse', function() {
    stop = true;
    This.stop();
    This.unbind('mouseover.flashPulse');
    This.css('background-color', origBg);
})

function loop() {
    console.log(This);
    if( !stop ) {
        This.animate({backgroundColor: pulseColor}, pulseTime/3, function(){
            This.animate({backgroundColor: origBg}, (pulseTime/3)*2, 'easeInCirc', loop);
        });
    }
}

loop();

return This;
}

score 1 · Answer 25 · answered Jul 09 '14 at 14:02

Put this together from all of the above - an easy solution for flashing an element and return to the original bgcolour...

$.fn.flash = function (highlightColor, duration, iterations) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    var originalBg = this.css('backgroundColor');
    var flashString = 'this';
    for (var i = 0; i < iterations; i++) {
        flashString = flashString + '.animate({ backgroundColor: highlightBg }, animateMs).animate({ backgroundColor: originalBg }, animateMs)';
    }
    eval(flashString);
}

Use like this:

$('<some element>').flash('#ffffc0', 1000, 3);

Hope this helps!

I know, I just needed a quick and dirty solution. Eval has it's uses sometimes! — Duncan, Jul 17 '14 at 13:05

score 1 · Answer 26 · answered Jan 05 '15 at 03:08

Here's a solution that uses a mix of jQuery and CSS3 animations.

http://jsfiddle.net/padfv0u9/2/

Essentially you start by changing the color to your "flash" color, and then use a CSS3 animation to let the color fade out. You need to change the transition duration in order for the initial "flash" to be faster than the fade.

$(element).removeClass("transition-duration-medium");
$(element).addClass("transition-duration-instant");
$(element).addClass("ko-flash");
setTimeout(function () {
    $(element).removeClass("transition-duration-instant");
    $(element).addClass("transition-duration-medium");
    $(element).removeClass("ko-flash");
}, 500);

Where the CSS classes are as follows.

.ko-flash {
    background-color: yellow;
}
.transition-duration-instant {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}
.transition-duration-medium {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}

score 1 · Answer 27 · answered Feb 06 '15 at 08:43

1

just give elem.fadeOut(10).fadeIn(10);

answered Feb 06 '15 at 08:43

ibsenv

619
1
5
18

score 1 · Answer 28 · answered Feb 22 '15 at 14:10

This is generic enough that you can write whatever code you like to animate. You can even decrease the delay from 300ms to 33ms and fade colors, etc.

// Flash linked to hash.
var hash = location.hash.substr(1);
if (hash) {
    hash = $("#" + hash);
    var color = hash.css("color"), count = 1;
    function hashFade () {
        if (++count < 7) setTimeout(hashFade, 300);
        hash.css("color", count % 2 ? color : "red");
    }
    hashFade();
}

score 1 · Answer 29 · edited Jan 16 '17 at 11:11

1

you can use jquery Pulsate plugin to force to focus the attention on any html element with control over speed and repeatation and color.

JQuery.pulsate() ^{* with Demos}

sample initializer:

$(".pulse4").pulsate({speed:2500})
$(".CommandBox button:visible").pulsate({ color: "#f00", speed: 200, reach: 85, repeat: 15 })

edited Jan 16 '17 at 11:11

clearlight

12,255
11
57
75

answered Jan 16 '17 at 10:38

Iman

17,932
6
80
90

th3byrdm4n · Answer 30 · 2011-12-23T23:00:48.783

1

Here's a slightly improved version of colbeerhey's solution. I added a return statement so that, in true jQuery form, we chain events after calling the animation. I've also added the arguments to clear the queue and jump to the end of an animation.

// Adds a highlight effect
$.fn.animateHighlight = function(highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    this.stop(true,true);
    var originalBg = this.css("backgroundColor");
    return this.css("background-color", highlightBg).animate({backgroundColor: originalBg}, animateMs);
};

edited Dec 23 '11 at 23:00

answered Dec 23 '11 at 22:49

th3byrdm4n

172
1
10

note: animating background colors requires the use of the colors UI plugin. see: http://api.jquery.com/animate/ – Martlark May 28 '14 at 07:11

score 0 · Answer 31 · answered Aug 22 '13 at 14:27

This function makes it blink. It must use cssHooks, because of the rgb default return of background-color function.

Hope it helps!

$.cssHooks.backgroundColor = {
get: function(elem) {
    if (elem.currentStyle)
        var bg = elem.currentStyle["backgroundColor"];
    else if (window.getComputedStyle)
        var bg = document.defaultView.getComputedStyle(elem,
            null).getPropertyValue("background-color");
    if (bg.search("rgb") == -1)
        return bg;
    else {
        bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        function hex(x) {
            return ("0" + parseInt(x).toString(16)).slice(-2);
        }
        return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
    }
}
}
function blink(element,blinkTimes,color,originalColor){
    var changeToColor;
    if(blinkTimes === null || blinkTimes === undefined)
        blinkTimes = 1;
    if(!originalColor || originalColor === null || originalColor === undefined)
        originalColor = $(element).css("backgroundColor");
    if(!color || color === null || color === undefined)
        color = "#ffffdf";
    if($(element).css("backgroundColor") == color){
        changeToColor = originalColor;
    }else{
        changeToColor = color;
        --blinkTimes;
    }
    if(blinkTimes >= 0){
        $(element).animate({
            "background-color": changeToColor,
        }, {
            duration: 500,
            complete: function() {
                blink(element, blinkTimes, color, originalColor);
                return true;
            }
        });
    }else{
        $(element).removeAttr("style");
    }
    return true;
}

score 0 · Answer 32 · answered Oct 08 '14 at 23:51

0

Simple as the best is to do in this way :

<script>

setInterval(function(){

    $(".flash-it").toggleClass("hide");

},700)
</script>

answered Oct 08 '14 at 23:51

Xanarus

763
1
6
18

score 0 · Answer 33 · answered Feb 03 '15 at 11:25

Working with jQuery 1.10.2, this pulses a dropdown twice and changes the text to an error. It also stores the values for the changed attributes to reinstate them.

// shows the user an error has occurred
$("#myDropdown").fadeOut(700, function(){
    var text = $(this).find("option:selected").text();
    var background = $(this).css( "background" );

    $(this).css('background', 'red');
    $(this).find("option:selected").text("Error Occurred");

        $(this).fadeIn(700, function(){
            $(this).fadeOut(700, function(){
                $(this).fadeIn(700, function(){
                    $(this).fadeOut(700, function(){

                        $(this).find("option:selected").text(text);
                        $(this).css("background", background);
                        $(this).fadeIn(700);
                    })
                })
            })
        })
});

Done via callbacks - to ensure no animations are missed.

maudulus · Answer 34 · 2015-02-06T20:35:42.280

Create two classes, giving each a background color:

.flash{
 background: yellow;
}

.noflash{
 background: white;
}

Create a div with one of these classes:

<div class="noflash"></div>

The following function will toggle the classes and make it appear to be flashing:

var i = 0, howManyTimes = 7;
function flashingDiv() {
    $('.flash').toggleClass("noFlash")
    i++;
    if( i <= howManyTimes ){
        setTimeout( f, 200 );
    }
}
f();

score 0 · Answer 35 · answered Sep 25 '19 at 14:52

Straight jquery, no plugins. It blinks the specified number of times, changes the background color while blinking and then changes it back.

function blink(target, count, blinkspeed, bc) {
    let promises=[];
    const b=target.css(`background-color`);
    target.css(`background-color`, bc||b);
    for (i=1; i<count; i++) {
            const blink = target.fadeTo(blinkspeed||100, .3).fadeTo(blinkspeed||100, 1.0);
            promises.push(blink);
    }
    // wait for all the blinking to finish before changing the background color back
    $.when.apply(null, promises).done(function() {
            target.css(`background-color`, b);
    });
    promises=undefined;
}

Example:

blink($(`.alert-danger`), 5, 200, `yellow`);

score 0 · Answer 36 · answered Jan 01 '20 at 06:53

0

you can use this code :) change mili value for change animation speed

var mili = 300
for (var i = 2; i < 8; i++) {
   if (i % 2 == 0) {
      $("#lblTransferCount").fadeOut(mili)
   } else {
      $("#lblTransferCount").fadeIn(mili)
   }
}

answered Jan 01 '20 at 06:53

R.Akhlaghi

729
1
12
23

score 0 · Answer 37 · answered Aug 12 '22 at 15:02

CSS supports flashing in all major browsers

.flash {
    animation: flash 0.5s ease-out;
    animation-iteration-count: 10;
}
@keyframes flash {
    0% { opacity: 0.5; }
    50% { opacity: 1.0; }
    100% { opacity: 0.5; }
}

add this class to the element you want to flash

$(elem).addClass("flash");

iteration-count: 10 is how many times you want it to flash, no need to remove the class, it will stop flashing on its own.

by using opacity: this works for elements of any colour as long as its not already transparent.

score 0 · Answer 38 · answered Sep 21 '11 at 14:17

I am using this one. though not yet tested on all browser. just modify this in the way you like,

usage: hlight($("#mydiv"));

function hlight(elementid){
    var hlight= "#fe1414"; //set the hightlight color
    var aspeed= 2000; //set animation speed
    var orig= "#ffffff"; // set default background color
    elementid.stop().css("background-color", hlight).animate({backgroundColor: orig}, aspeed);
}

NOTE: you need a jquery UI added to your header.

score -1 · Answer 39 · answered Feb 15 '15 at 15:47

-1

You can use this cool library to make any kind of animated effect on your element: http://daneden.github.io/animate.css/

answered Feb 15 '15 at 15:47

Nizar B.

3,098
9
38
56

How do you make an element "flash" in jQuery

39 Answers39

After 5 years... (And no additional plugin needed)

Pure jQuery solution.

Here is a vanilla JQuery solution

JS

CSS

HTML

Linked

Related