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

User · Answer

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

User · Answer

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

User · Answer

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     lt div style  background   fff   gt     lt input type  submit  class  element  value  Whatever    gt   lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  gt   0             element  animate                background-color   changeToColor                           duration  500              complete  function                     blink element  blinkTimes  color  originalColor                   return true                                 else            element  removeAttr  style              return true

User · Answer

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  lt  7  setTimeout hashFade  300           hash css  color   count   2   color    red              hashFade

User · Answer

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     lt div class  flash  gt  lt  div gt        hello   prepend flash       flash   show   fadeOut  slow      CSS   flash       background-color  yellow      display  none      position  absolute      width  100       height  100       HTML   lt div class  hello  gt Hello World  lt  div gt

User · Answer

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 amp  amp color constructor  Array amp  amp 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     amp  amp 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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

just give elem fadeOut 10  fadeIn 10

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

you can use this code    change mili value for change animation speed  var mili   300 for  var i   2  i  lt  8  i         if  i   2    0              lblTransferCount   fadeOut mili       else             lblTransferCount   fadeIn mili

User · Answer

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

User · Answer

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  lt  iterations  i              flashString   flashString     animate   backgroundColor  highlightBg    animateMs  animate   backgroundColor  originalBg    animateMs              eval flashString       Use like this       lt some element gt    flash   ffffc0   1000  3     Hope this helps

User · Answer

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

User · Answer

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

User · Answer

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     lt div class  flash  gt  lt  div gt        hello   prepend flash       flash   show   fadeOut  slow      CSS   flash       background-color  yellow      display  none      position  absolute      width  100       height  100       HTML   lt div class  hello  gt Hello World  lt  div gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

function pulse             blink   fadeIn 300  fadeOut 500     setInterval pulse  1000

User · Answer

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

User · Answer

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

User · Answer

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  lt  7  setTimeout hashFade  300           hash css  color   count   2   color    red              hashFade

User · Answer

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

User · Answer

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

User · Answer

Create two classes  giving each a background color     flash   background  yellow      noflash   background  white      Create a div with one of these classes    lt div class  noflash  gt  lt  div gt    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  lt   howManyTimes            setTimeout  f  200            f

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

you can use this code    change mili value for change animation speed  var mili   300 for  var i   2  i  lt  8  i         if  i   2    0              lblTransferCount   fadeOut mili       else             lblTransferCount   fadeIn mili

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

district   css  opacity  0        district   animate  opacity  1   700

User · Answer

just give elem fadeOut 10  fadeIn 10

User · Answer

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

User · Answer

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

User · Answer

district   css  opacity  0        district   animate  opacity  1   700

User · Answer

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

User · Answer

My way is  fadein   fadeout  fadein   fadeout             someElement   fadeOut 100  fadeIn 100  fadeOut 100  fadeIn 100      x000D   x000D  function go1         demo1   fadeOut 100  fadeIn 100  fadeOut 100  fadeIn 100   x000D   x000D  function go2         demo2   delay 100  fadeOut   fadeIn  slow     x000D   demo1  x000D   demo2   x000D    text-align  center  x000D    font-family  Helvetica  x000D    background  IndianRed  x000D    height  50px  x000D    line-height  50px  x000D    width  150px  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt button onclick  go1    gt Click Me lt  button gt  x000D   lt div id  demo1  gt My Element lt  div gt  x000D   lt br gt  x000D   lt button onclick  go2    gt Click Me lt  button gt   from comment  x000D   lt div id  demo2  gt My Element lt  div gt  x000D   x000D   x000D

User · Answer

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 amp  amp color constructor  Array amp  amp 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     amp  amp 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

User · Answer

Simple as the best is to do in this way     lt script gt   setInterval function             flash-it   toggleClass  hide       700   lt  script gt

User · Answer

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

User · Answer

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     lt div style  background   fff   gt     lt input type  submit  class  element  value  Whatever    gt   lt  div gt    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

User · Answer

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  gt  0    this  fadeOut 300  fIn          element   fadeOut 300  fIn

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

My way is  fadein   fadeout  fadein   fadeout             someElement   fadeOut 100  fadeIn 100  fadeOut 100  fadeIn 100      x000D   x000D  function go1         demo1   fadeOut 100  fadeIn 100  fadeOut 100  fadeIn 100   x000D   x000D  function go2         demo2   delay 100  fadeOut   fadeIn  slow     x000D   demo1  x000D   demo2   x000D    text-align  center  x000D    font-family  Helvetica  x000D    background  IndianRed  x000D    height  50px  x000D    line-height  50px  x000D    width  150px  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt button onclick  go1    gt Click Me lt  button gt  x000D   lt div id  demo1  gt My Element lt  div gt  x000D   lt br gt  x000D   lt button onclick  go2    gt Click Me lt  button gt   from comment  x000D   lt div id  demo2  gt My Element lt  div gt  x000D   x000D   x000D

User · Answer

Create two classes  giving each a background color     flash   background  yellow      noflash   background  white      Create a div with one of these classes    lt div class  noflash  gt  lt  div gt    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  lt   howManyTimes            setTimeout  f  200            f

User · Answer

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

User · Answer

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  lt  iterations  i              flashString   flashString     animate   backgroundColor  highlightBg    animateMs  animate   backgroundColor  originalBg    animateMs              eval flashString       Use like this       lt some element gt    flash   ffffc0   1000  3     Hope this helps

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Simple as the best is to do in this way     lt script gt   setInterval function             flash-it   toggleClass  hide       700   lt  script gt

User · Answer

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

User · Answer

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

User · Answer

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  gt  0    this  fadeOut 300  fIn          element   fadeOut 300  fIn

User · Answer

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

User · Answer

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

User · Answer

function pulse             blink   fadeIn 300  fadeOut 500     setInterval pulse  1000

User · Answer

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

User · Answer

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  gt   0             element  animate                background-color   changeToColor                           duration  500              complete  function                     blink element  blinkTimes  color  originalColor                   return true                                 else            element  removeAttr  style              return true

User · Answer

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

User · Answer

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

[jquery] How do you make an element "flash" in jQuery

Examples related to jquery

Examples related to animation

Examples related to element

Examples related to highlight

Examples related to flashing