Text blinking jQuery

Question

What is an easy way to make text blinking in jQuery and a way to stop it  Must work for IE  FF and Chrome  Thanks

User · Answer

Blink functionality can be implemented by plain javascript, no requirement for jquery plugin or even jquery.

This will work in all the browsers, as it is using the basic functionality

Here is the code

HTML:

<p id="blinkThis">This will blink</p>

JS Code:

var ele = document.getElementById('blinkThis');
setInterval(function () {
    ele.style.display = (ele.style.display == 'block' ? 'none' : 'block');
}, 500);

and a working fiddle

User · Answer

One more made from the core jQuery functionality it could be better    function blink  el         if   el            el   this              el  animate    opacity  0 5   1200  function               this  animate   opacity  1    1200  blink                 You can tweak the animation opacity change 0 5- 1  and delay 1200  to get a better  blink   This one is less annoying than the blink of the 90es  -

User · Answer

Here you can find a jQuery blink plugin with its quick demo   Basic blinking  unlimited blinking  blink period  1 sec       selector   blink      On a more advanced usage  you can override any of the settings      selector   blink       maxBlinks  60       blinkPeriod  1000       in milliseconds     onBlink  function           onMaxBlinks  function           There you can specify the max number of blinks as well as have access to a couple of callbacks  onBlink and onMaxBlinks that are pretty self explanatory   Works in IE 7  amp  8  Chrome  Firefox  Safari and probably in IE 6 and Opera  although haven t tested on them     In full disclosure  I m am the creator of this previous one  We had the legitimate need to use it at work  I know we all like to say this  -   for an alarm within a system and I thought of sharing only for use on a legitimate need  -      Here is another list of jQuery blink plugins

User · Answer

A plugin to blink some text sounds a bit like overkill to me     Try this         blink   each function         var elem     this       setInterval function             if  elem css  visibility       hidden                 elem css  visibility    visible              else               elem css  visibility    hidden                         500

User · Answer

based on alex idea      selector   blink       fn blink   function options            options     extend       speed    800   options        var elem   this      setInterval function             if   elem is   visible                  elem show              else               elem hide                         options speed

User · Answer

fn blink   function  delay      delay   delay    500    return this each function          var element     this       var interval   setInterval function            element fadeOut  delay   3   function             element fadeIn delay   3                   delay       element data  blinkInterval   interval               fn stopBlinking   function       return this each function         var element     this       element stop true  true       clearInterval element data  blinkInterval

User · Answer

This is the EASIEST way  and with the least coding    setInterval function              blink    fadeToggle       500     Fiddle  Now  if you are looking for something more sophisticated       Blink settings var blink         obj      blink        timeout  15000      speed  1000       Start function blink fn   setInterval function          blink obj fadeToggle blink speed      blink speed   1      Ends blinking  after  blink timeout  millisecons setTimeout function          clearInterval blink fn         Ensure that the element is always visible     blink obj fadeIn blink speed       blink   null     blink timeout     Fiddle

User · Answer

I like alex s answer  so this is a bit of an extension of that without an interval  since you would need to clear that interval eventually and know when you want a button to stop blinking  This is a solution where you pass in the jquery element  the ms you want for the blinking offset and the number of times you want the element to blink   function blink   element  ms  times        for  var i   0  i  lt  times  i              window setTimeout function                  if   element is   visible                       element hide                  else                    element show                             ms    times   1

User · Answer

Try using this blink plugin  For Example      blink   blink       default is 500ms blink interval        blink   blink 100      causes a 100ms blink interval    It is also a very simple plugin  and you could probably extend it to stop the animation and start it on demand

User · Answer

You can also use the standard CSS way  no need for JQuery plugin  but compatible with all browsers       Start blinking     myblink   css  text-decoration    blink        Stop blinking     myblink   css  text-decoration    none      W3C Link

User · Answer

here s blinking with animation       blink   animate  opacity 0  200  linear  function        this  animate  opacity 1  200         just give a blink class whatever u want to blink    lt div class  someclass blink  gt some text lt  div gt    all regards to DannyZB on  jquery   features    doesn t need any plugins  but JQuery itself  does the thing

User · Answer

Some of these answers are quite complicated  this is a bit easier     fn blink   function time        var time   typeof time     undefined    200   time      this hide 0  delay time  show 0          msg   blink

User · Answer

If you d rather not use jQuery  this can be achieved with CSS3   -webkit-keyframes blink       from   opacity  1 0      to   opacity  0 0       blink     -webkit-animation-name  blink      -webkit-animation-iteration-count  infinite      -webkit-animation-timing-function  cubic-bezier 1 0 0 0 1 0     -webkit-animation-duration  1s       Seems to work in Chrome  though I thought I heard a slight sobbing noise

User · Answer

Seeing the number of views on this question  and the lack of answers that cover both blinking and stopping it  here goes  try jQuery blinker out  demo    HTML    lt p gt Hello there  lt  p gt    JavaScript   var p      p     p blinker     p bind          pause blinking on mouseenter     mouseenter  function              this  data  blinker   pause                  resume blinking on mouseleave     mouseleave  function              this  data  blinker   blinkagain

User · Answer

I have written a simple jquery extension for text blink whilst specifying number of times it should blink the text  Hope it helps others     add Blink function to jquery  jQuery fn extend       Blink  function  i            var c   i  if  i   -1    c--  gt  0    this  fadeTo  slow   0 1  function        this  fadeTo  slow   1  function        this  Blink c                        Use it like this     mytext   Blink 2     Where 2 denotes number of time it should blink    For continuous blink use -1      mytext   Blink -1

User · Answer

You can also try these    lt div gt some  lt span class  blink  gt text lt  span gt  are  lt span class  blink  gt blinking lt  span gt  lt  div gt   lt button onclick  startBlink    gt blink lt  button gt   lt button onclick  stopBlink    gt no blink lt  button gt    lt script gt    function startBlink        window blinker   setInterval function            if window blink                  blink   css  color   blue               window blink false                     else                  blink   css  color   white                window blink   true                  500          function stopBlink        if window blinker  clearInterval window blinker         lt  script gt

User · Answer

this code is work for me       document  ready function              setInterval function                    blink   fadeOut function                        this  fadeIn                               100

User · Answer

Text Blinking start and stop on button click -   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

Indeed a plugin for a simple blink effect is overkill  So after experimenting with various solutions  I have choosen between one line of javascript and a CSS class that controls exactly how I want to blink the elements  in my case for the blink to work I only need to change the background to transparent  so that the text is still visible    JS     document  ready function              setInterval function          blink   toggleClass  no-bg       1000             CSS   span no-bg       background-color  transparent      Full example at this js fiddle

User · Answer

myblink   css  text-decoration    blink      do not work with IE 7  amp  Safari  Work well with Firefox

User · Answer

This stand-alone solution will blink the text a specified number of times and then stop   The blinking uses opacity  rather than show hide  fade or toggle so that the DIV remains clickable  in case that s ever an issue  allows you to make buttons with blinking text    jsFiddle here  contains additional comments    lt html gt       lt head gt           lt script src    ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt            lt script type  text javascript  gt                document  ready function                      var init   0                       clignotant   click function                         if  init  0                            init                            blink this  800  4                        else                          alert  Not document load  so process the click event                                                               function blink selector  blink speed  iterations  counter                       counter   counter   0                        selector  animate  opacity 0   50   linear   function                              this  delay blink speed                             this  animate  opacity 1   50  function                                 counter                                 if  iterations    -1                                    blink this  blink speed  iterations  counter                                else if  counter  gt   iterations                                    return false                               else                                  blink this  blink speed  iterations  counter                                                                                       this  delay blink speed                                                                This line must come  AFTER  the     clignotant   click   function                    window load     clignotant   trigger  click                         END   document  ready             lt  script gt       lt  head gt   lt body gt        lt div id  clignotant  style  background-color  FF6666 width 500px      height 100px text-align center   gt           lt br gt          Usage  blink selector  blink speed  iterations   lt br   gt           lt span style  font-weight bold color blue   gt if iterations    -1 blink forever lt  span gt  lt br   gt          Note  fn call intentionally missing 4th param      lt  div gt     lt  body gt   lt  html gt    Sources  Danny Gimenez Moses Christian

User · Answer

Easiest way       element   fadeTo 250  0  fadeTo 250 1  fadeTo 250 0  fadeTo 250 1     You can repeat this as much as you want or you can use it inside a loop  the first parameter of the fadeTo   is the duration for the fade to take effect  and the second parameter is the opacity

User · Answer

This is what ended up working best for me  I used jQuery fadeTo because this is on WordPress  which already links jQuery in   Otherwise  I probably would have opted for something with pure JavaScript before adding another http request for a plugin     document  ready function            One  blink  takes 1 5s     setInterval function               Immediately fade to opacity  0 in 0ms             cursor   fadeTo  0  0              Wait  75sec then fade to opacity  1 in 0ms         setTimeout function                    cursor   fadeTo  0  1              750          1500

User · Answer

Link to author   lt script type  text javascript  src  http   code jquery com jquery-1 4 1 min js  gt  lt  script gt    lt div id  msg  gt   lt strong gt  lt font color  red  gt Awesome Gallery By Anil Labs lt  font gt  lt  strong gt  lt  p gt   lt  div gt    lt script type  text javascript   gt  function blink selector         selector  fadeOut  slow   function              this  fadeIn  slow   function                blink this                          blink   msg     lt  script gt

User · Answer

Here s mine   it gives you control over the 3 parameters that matter    the fade in speed the fade out speed the repeat speed      setInterval function             blink   fadeIn 300  fadeOut 500      1000

User · Answer

This code might help to this topic  Simple  yet useful    lt script type  text javascript  src  http   code jquery com jquery-1 4 1 min js  gt  lt  script gt   lt script type  text javascript  gt        document  ready function            setInterval      myID  myClass   toggle     500            lt  script gt

User · Answer

fn blink   function times  duration        times   times    2      while  times--            this fadeTo duration  0  fadeTo duration  1             return this

User · Answer

I was going to post the steps-timed polyfill  but then I remembered that I really don   t want to ever see this effect  so     function blink element  interval        var visible   true       setInterval function             visible    visible          element style visibility   visible    visible     hidden          interval    1000

User · Answer

Blinking    var counter   5     Blinking the link 5 times var  help      div help    var blinkHelp   function           help is   visible      help fadeOut 250     help fadeIn 250            counter--      if  counter  gt   0  setTimeout blinkHelp  500      blinkHelp

User · Answer

This code will effectively make the element s  blink without touching the layout  like fadeIn   fadeOut   will do  by just acting on the opacity   There you go  blinking text   usable for both good and evil     setInterval function           blink   animate   opacity  1    400  animate   opacity  0    600      800

User · Answer

Combine the codes above  I think this is a good solution   function blink selector         selector  animate  opacity 0   50   linear   function              this  delay 800             this  animate  opacity 1   50  function            blink this                         this  delay 800               At least it works on my web  http   140 138 168 123 2y78 202782

User · Answer

result      blink   fadeIn  fast        animate           color   quot  FFCD56 quot         100  animate           color   quot white quot         100       animate           color   quot  FFCD56 quot         100  animate           color   quot white quot         100       animate           color   quot  FFCD56 quot         100  animate           color   quot white quot         100       animate           color   quot  FFCD56 quot         100  animate           color   quot white quot         100       animate           color   quot  FFCD56 quot         100  animate           color   quot white quot         100

User · Answer

You can try the jQuery UI Pulsate effect   http   docs jquery com UI Effects Pulsate

User · Answer

I feel the following is of greater clarity and customization than other answers       var element to blink     id of element to blink        var min opacity 0 2      var max opacity 1 0      var blink duration 2000      var blink quantity 10      var current blink number 0       while current blink number lt blink quantity           element to blink animate  opacity min opacity   blink duration 2   linear            element to blink animate  opacity max opacity   blink duration 2   linear            current blink number  1

User · Answer

Try this   setInterval  function        quot  me quot   fadeOut 500  fadeIn 500      500

[javascript] Text blinking jQuery

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css