jQuery blinking highlight effect on div

Question

I m looking for a way to do the following   I add a  lt div gt  to a page  and an ajax callback returns some value  The  lt div gt  is filled with values from the ajax call  and the  lt div gt  is then prepended to another  lt div gt   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  lt div gt  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

User · Answer

Check it out -   lt input type  button  id  btnclick  value  click    gt  var intervalA          var intervalB             document  ready function                       btnclick   click function                      blinkFont                     setTimeout function                          clearInterval intervalA                       clearInterval intervalB                      5000                                        function blinkFont                 document getElementById  blink   style color    red              document getElementById  blink   style background    black              intervalA   setTimeout  blinkFont     500                      function setblinkFont                 document getElementById  blink   style color    black              document getElementById  blink   style background    red              intervalB   setTimeout  blinkFont     500                   lt  script gt        lt div id  blink  class  live-chat  gt           lt span gt This is blinking text and background lt  span gt       lt  div gt

User · Answer

If you don t want the overhead of jQuery UI  I recently wrote a recursive solution using  animate    You can customize the delays and colors as you need   function doBlink id  count          id  animate   backgroundColor    fee3ea               duration  100           complete  function                     reset               id  delay 100  animate   backgroundColor    ffffff                       duration  100                  complete  function                             maybe call next round                     if count  gt  1                            doBlink id  --count                                                                                  Of course you ll need the color plugin to get backgroundColor to work with  animate    https   github com jquery jquery-color  And to provide a bit of context this is how I called it  I needed to scroll the page to my target div and then blink it     window  load function           html body   animate           scrollTop    scrollToId  offset   top - 50                  duration  400          complete  function     doBlink scrollToId  5

User · Answer

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 lt 3 i            this  fadeTo  slow   0 5  fadeTo  slow   1 0                so it won t go any lower than 50  opacity

User · Answer

Try with jquery blink js plugin   https   github com webarthur jquery-blink   lt script src  http   code jquery com ui 1 11 4 jquery-ui js  gt  lt  script gt   lt script src   path to jquery blink js  gt  lt  script gt    lt script gt  jQuery  span   blink  color  white     color  black    50    lt  script gt     enjoy

User · Answer

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

User · Answer

This is a custom blink effect I created  which uses setInterval and fadeTo  HTML -    lt div id  box  gt Box lt  div gt    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

User · Answer

You may want to look into jQuery UI  Specifically  the highlight effect   http   jqueryui com demos effect

User · Answer

I think you could use a similar answer I gave   You can find it here    https   stackoverflow com a 19083993 2063096   should work on all browsers as it only Javascript and jQuery    Note  This solution does NOT use jQuery UI  there is also a fiddle so you can play around to your liking before implementing it in your code

User · Answer

I use different predefined colors like so   theme         whateverFlashColor    ffffaa       whateverElseFlashColor    bbffaa       whateverElseThenFlashColor    ffffff        and use them like this      element   effect  highlight    color theme whateverFlashColor   1000     easy

User · Answer

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

User · Answer

Since I don t see any jQuery based solutions that don t require extra libraries here is a simple one that is a bit more flexible than those using fadeIn fadeOut     fn blink   function  count        var  this     this        count   count - 1    0        this animate  opacity   25   100  function               this animate  opacity  1   100  function                  if  count  gt  0                     this blink count                                          Use it like this      element   blink 3      3 Times

User · Answer

I couldn t find exactly what I was looking for so wrote something as basic as I could make it  The highlighted class could just be a background color   var blinking   false     global scope  function start blinking         blinking   true      blink       function stop blinking         blinking   false     function blink x 0            element   removeClass  highlighted       default to not highlighted to account for the extra iteration after stopping      if  blinking            if  x 2    0      element   addClass  highlighted       highlight on even numbers of x         setTimeout function   blink   x   500      increment x and recurse

User · Answer

lt script gt    document  ready function        var count   0      do               toFlash   fadeOut 500  fadeIn 500           count          while count  lt  10    set how many time you want it to flash        lt  script

User · Answer

just give elem fadeOut 10  fadeIn 10

User · Answer

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

[javascript] jQuery "blinking highlight" effect on div?

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to highlight

Examples related to effects