106

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

2

35 Answers 35

95

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);
});
4
  • 13
    Alex, thanks for bringing the blink tag into the 21st century, all of my 90s parody websites thank you from the bottom of their ugly little hearts :) Commented Mar 16, 2012 at 10:21
  • 1
    @alex, may I request you to have a look at a jquery question on a different topic here : stackoverflow.com/questions/13137404/… ? Commented Oct 31, 2012 at 9:15
  • 2
    How would you use this (in code)? - sorry for what's probably a dumb question.
    – TheSteven
    Commented Jun 3, 2013 at 0:06
  • 2
    @TheSteven In this example, any element with a class of blink will have this applied to it. So you'd have something like <span class="blink">Blinky Bill</span> and then after DOM ready or similar, have this code run.
    – alex
    Commented Jun 3, 2013 at 0:13
54

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.

4
  • 1
    i'd use the blink-tag, and check with jQuery whether the browser is IE, and if not blink with this plugin.
    – Natrium
    Commented Oct 22, 2009 at 8:43
  • 11
    that's more effort than it's worth isn't it?
    – barkmadley
    Commented Oct 22, 2009 at 11:47
  • 1
    barkmadley, how do I set stop for the blinking?
    – HP.
    Commented Nov 8, 2009 at 2:51
  • out of all the proposed solutions here this is the only one that worked for me
    – mknopf
    Commented Aug 29, 2021 at 17:49
41

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:

<div class="someclass blink">some text</div>

all regards to DannyZB on #jquery

features:

  • doesn't need any plugins (but JQuery itself)
  • does the thing
2
  • yeah, i figured that out after posting ) fixed easily though
    – nir0
    Commented Feb 15, 2013 at 15:13
  • This is nice without any plugins or fancy stuff
    – Peter T.
    Commented Feb 3, 2017 at 13:00
15

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.

0
9

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

2
  • This is a good answer in that it still allows user to click on the blinking element during the "off" cycle, unlike the solutions that use hide or toggle or fade. See also Hermann Ingjaldsson's answer above.
    – cssyphus
    Commented Jul 4, 2013 at 20:05
  • fadeIn() and fadeOut() didn't do it for you?
    – alex
    Commented Jun 10, 2015 at 3:38
8

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);
3
  • jQuery chaining would be great here
    – alex
    Commented Jun 10, 2015 at 3:39
  • This makes it disappear between blinks which messes up layout Commented Dec 28, 2015 at 19:31
  • @alex and Full Decent you are both right :)
    – yPhil
    Commented Mar 22, 2018 at 14:53
6

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

2
  • 14
    Not compatible with Chrome and Safari! Commented Nov 18, 2010 at 18:05
  • Not compatible with IE9 either.
    – johndodo
    Commented Oct 13, 2011 at 13:22
6

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

5

You can also try these:

<div>some <span class="blink">text</span> are <span class="blink">blinking</span></div>
<button onclick="startBlink()">blink</button>
<button onclick="stopBlink()">no blink</button>

<script>
  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);
  } 
</script>
1
  • 4
    That example pollutes the global namespace needlessly.
    – alex
    Commented Feb 19, 2012 at 0:17
5
$.fn.blink = function(times, duration) {
    times = times || 2;
    while (times--) {
        this.fadeTo(duration, 0).fadeTo(duration, 1);
    }
    return this;
};
2
  • 1
    Absolutely great! The use of setInterval(function ()) can bring along a few problems (bubbling, stopping, stayng "on", etc.) Thanks a lot! Commented May 8, 2014 at 21:51
  • Simple and straight to the point. +1
    – Giddy Naya
    Commented Nov 3, 2021 at 14:43
4

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 & 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.

3

this code is work for me

   $(document).ready(function () {
        setInterval(function(){
            $(".blink").fadeOut(function () {
                $(this).fadeIn();
            });
        } ,100)
    });
2

You can try the jQuery UI Pulsate effect:

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

3
  • 1
    I am not sure why people go to such lengths (custom coding) with "pulsate" available.
    – Jeffz
    Commented Oct 28, 2012 at 9:11
  • @Jeffz People that don't want jQuery UI on their page for one small effect that can be achieved in a few lines.
    – alex
    Commented Jun 22, 2016 at 8:24
  • @Alex You are right. Since 2012 I came across many sites where something like blinking was needed and jQuery UI was not an option.
    – Jeffz
    Commented Jun 23, 2016 at 9:09
2

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.

1
$(".myblink").css("text-decoration", "blink");

do not work with IE 7 & Safari. Work well with Firefox

1

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)

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <script type="text/javascript">
            $(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 >= 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()

        </script>
    </head>
<body>

    <div id="clignotant" style="background-color:#FF6666;width:500px;
    height:100px;text-align:center;">
        <br>
        Usage: blink(selector, blink_speed, iterations) <br />
        <span style="font-weight:bold;color:blue;">if iterations == -1 blink forever</span><br />
        Note: fn call intentionally missing 4th param
    </div>


</body>
</html>

Sources:
Danny Gimenez
Moses Christian

1

Link to author

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

<div id="msg"> <strong><font color="red">Awesome Gallery By Anil Labs</font></strong></p> </div>

<script type="text/javascript" >
function blink(selector){
    $(selector).fadeOut('slow', function(){
        $(this).fadeIn('slow', function(){
            blink(this);
        });
    });
}

blink('#msg');
</script>
0
1

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);
}
1

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<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;
        }
3
  • 1
    This is a good answer in that it still allows user to click on the blinking element during the "off" cycle, unlike the solutions that use hide or toggle or fade. See also Moses Christian's answer below.
    – cssyphus
    Commented Jul 4, 2013 at 20:04
  • 1
    1. Your first group of vars are global 2. Your vars are misleading, element_id pointing to a selector 3. You select the same element over and over
    – alex
    Commented Jun 10, 2015 at 3:42
  • Thanks for the feedback, I have gone through those points and fixed them.
    – john-jones
    Commented Jun 10, 2015 at 18:32
1

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);
0
0

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 >= 0) setTimeout(blinkHelp, 500);
};
blinkHelp();
0

This code might help to this topic. Simple, yet useful.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        setInterval("$('#myID/.myClass').toggle();",500);
    });
</script>
1
  • 1
    This will remove the element in question when it is invisible, which could ultimately hurt the structure of the page.
    – ramblinjan
    Commented Mar 27, 2012 at 22:36
0

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 < times; i++) {
        window.setTimeout(function () {
            if ($element.is(':visible')) {
                $element.hide();
            } else {
                $element.show();
            }
        }, ms * (times + 1));
    }
}
0

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();
0

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:

<p>Hello there!</p>

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();
    }
});
0

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.

0

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

0

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);
});
0

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-- > 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);
0

Text Blinking start and stop on button click -

<input type="button" id="btnclick" value="click" />
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);
        }

    </script>

    <div id="blink" class="live-chat">
        <span>This is blinking text and background</span>
    </div>

Not the answer you're looking for? Browse other questions tagged or ask your own question.