jQuery Blink Plugin

Share this

In response to the RIP <blink> posted on http://www.dosomethinghere.com/ I decided to do something about this blink tag problem we all have with Internet Explorer.

I've always been a fan of the blink tag and think sites can benefit greatly by it.

Here's my solution: A jQuery Blink Plugin

1
2
3
4
5
6
7
8
9
10
11
12
<script src="jquery-1.3.2.min.js" language="javascript" type="text/javascript"></script>
<script src="jquery-blink.js" language="javscript" type="text/javascript"></script>
 
<script type="text/javascript" language="javascript">
 
$(document).ready(function()
{
        $('.blink').blink(); // default is 500ms blink interval.
        //$('.blink').blink({delay:100}); // causes a 100ms blink interval.
});
 
</script>
and down on the page somewhere:
1
<span class="blink">this</span> is some <span class="blink">blinking</span> text.

here are the results:

this is some blinking text.



AttachmentSize
jquery-blink.zip19.72 KB

another choice to stop

another choice to stop blink:

(function($)
{
$.fn.blink = function(options)
{
var defaults = { delay:500 };
var options = $.extend(defaults, options);

return this.each(function()
{
var timerId;
var obj = $(this);
timerId = setInterval(function()
{
if($(obj).css("visibility") == "visible")
{
$(obj).css('visibility','hidden');
}
else
{
$(obj).css('visibility','visible');
}
}, options.delay);

obj.data("timerId", timerId);
});
}

$.fn.stopBlink = function()
{
return this.each(function()
{
clearInterval($(this).data("timerId"));
});
}
}(jQuery))

// start
$('#first-loading').blink({
delay: 100
});

// stop
$('#first-loading').stopBlink();

My go: $.fn.blink = function

My go:

$.fn.blink = function (options) {
var defaults = { delay: 500, times: 0 };
var options = $.extend(defaults, options);

return this.each(function () {
var count = 1;
var obj = $(this);
var timer = setInterval(function () {
if ($(obj).css("visibility") == "visible") {
count++;
$(obj).css('visibility', 'hidden');
}
else {
if (options.times == 0 || count >= options.times) { clearInterval(timer); }
$(obj).css('visibility', 'visible');
}
}, options.delay);
});
};

Thanks a lot for this

Thanks a lot for this solution, the CSS blink method not work in IE, but the jQuery it's a smart idea, now the blink text in my website http://exotikcar.com work fin.
Thanks for the free script.

hi, how can i stop the

hi,

how can i stop the blinking?

david

Thanks! Very useful. I

Thanks! Very useful.
I changed this so that it's not blinking but kinda glowing. I'm a noob at jQuery.
When mouse is over it, it stops and when mouse is out, it starts glowing again.
Tested on IE8 and FF7 - works.
I didn't know how to add options like default color. Feel free to rewrite it for your needs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
(function($)
{
    $.fn.blink = function(options
    {
       var defaults = { delay:500 };
       var options = $.extend(defaults, options);
 
        return this.each(function()
        {
            var obj = $(this);
            if (obj.attr("timerid") > 0) return;
                                
            function startglow()
            {
                if (($(obj).css("color") == "rgb(255, 255, 255)") || ($(obj).css("color") == "rgb(255,255,255)"))
                {
                    $(obj).animate({color: '#999'}, Math.round(options.delay/2));
                }
                else
                {
                    $(obj).animate({color: '#fff'}, Math.round(options.delay/2));
                }
            }
                                
            var timerid = setInterval(startglow, options.delay);
                                
            obj.attr("timerid", timerid);
                                
            $(this).mouseover(function() { $(obj).animate({color: '#fff'}, Math.round(options.delay/2)); clearInterval(timerid) });
            $(this).mouseout(function() { timerid = setInterval(startglow, options.delay); });
        });
    }
}(jQuery))

Gone Andy Coulson resigned as

Gone Andy Coulson resigned as News of the death comes the
same day as Shale was quoted in the Sunday Times interview on their video screens.

Double Booker Prize winner and Tudor expert Mantel sparked fury by planning to help promote Britain at the
moment david cameron is the right thing. Witnesses said a man was sitting on
a pair of david cameron seats on the other. The Treasury
will also publish an infrastructure bill due to be
debated on Wednesday.

Here is an improved the

Here is an improved the script of Anonymous on 2 june 2011.

* Remove the use of fadeIn and fadeOut, because fadeOut will use display=none and the element will not take its space anymore instead of being hidden, the example will not work.
* Prevent from calling more than once blink() on a object by checking obj.attr("timerid") (or the blinking will be funny).
* Add an option to unblink if you want the element to be eventually visible or hidden (visible by default).

Tested with jQuery 1.5.2 under the browsers Firefox, Opera, a Webkit-based browser (like Chrome and Safari) and IE8.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
(function($)
{
        $.fn.blink = function(options)
        {
                var defaults = { delay:500 };
                var options = $.extend(defaults, options);
                
                return this.each(function()
                {
                        var obj = $(this);
                        if (obj.attr("timerid") > 0) return;
                        var timerid=setInterval(function()
                        {
                                if($(obj).css("visibility") == "visible")
                                {
                                        $(obj).css('visibility','hidden');
                                }
                                else
                                {
                                        $(obj).css('visibility','visible');
                                }
                        }, options.delay);
                        obj.attr("timerid", timerid);
                });
        }
        $.fn.unblink = function(options) 
        {
                var defaults = { visible:true };
                var options = $.extend(defaults, options);
                
                return this.each(function() 
                {
                        var obj = $(this);
                        if (obj.attr("timerid") > 0) 
                        {
                                clearInterval(obj.attr("timerid"));
                                obj.attr("timerid", 0);
                                obj.css('visibility', options.visible?'visible':'hidden');
                        }
                });
        }
}(jQuery))

Thanks piR for the codes And

Thanks piR for the codes
And here for stop blinking when mouseover and blinking again when mouseout

$(document).ready(function()
{
$('.blink').blink();

$('.blink').mouseover(function(){
$(this).stop().unblink();
});
$('.blink').mouseout(function(){
$(this).blink();
});
});

Thanks for the Script..

Thanks for the Script.. Really helped....... is there is any way or workaround to assign dynamic text (alternate text to be dynamic)

I edit for fadeIn and fadeOut

I edit for fadeIn and fadeOut blinking div text:

(function(jQuery) {
jQuery.fn.blink = function(options) {
var defaults = { delay: 1000 };
var options = jQuery.extend(defaults, options);

return this.each(function() {
var obj = jQuery(this);
var timerid = setInterval(function() {
if (obj.css("display") == "block") {
obj.fadeOut(500);
}
else {
obj.fadeIn(500);
}
}, options.delay);
obj.attr("timerid", timerid);
});
}
//
jQuery.fn.unblink = function(options) {
return this.each(function() {
var obj = jQuery(this);
if (obj.attr("timerid") > 0) {
clearInterval(obj.attr("timerid"));
obj.attr("timerid", 0);
obj.css('visibility', 'visible');
}
});
}
//
} (jQuery))

great script, simple and

great script, simple and useful...thanks

Thought id share a small

Thought id share a small modification to allow for text swapping:

// Blink function
(function($)
{
$.fn.blink = function(options)
{
var defaults = { delay:500, altText:'' };
var options = $.extend(defaults, options);
return this.each(function()
{
var obj = $(this);
var originalText = $(this).html();
// If we dont have alt Text, Blink
if(options.altText == '') setInterval(function(){if($(obj).css("visibility") == "visible"){$(obj).css('visibility','hidden');}else{$(obj).css('visibility','visible');}}, options.delay);
// Else swap text on delay
else setInterval(function(){if($(obj).html() == originalText){$(obj).html(options.altText);}else{$(obj).html(originalText);}}, options.delay);
});
}
}(jQuery));

$('.someClass p').blink({delay:1000, altText:'Hello There!'});

thanks for this awesome

thanks for this awesome plugin. let's bring the 90ies back to the internet!
besides text blinking this also makes sense in context with image-blinking (eg. when waiting for a server response)

There is a free blink text

There is a free blink text plugin available on http://www.joomtrax.com.
This can blink more than one text at a time.

Thanks for this useful

Thanks for this useful plugin! You're great!

Just to thank you buddy for

Just to thank you buddy for this nice and light plugin. you rock ;)

Thanks for this plug in! I

Thanks for this plug in!
I use it for blink icon for requiered textbox

i add code for unblink

(function(jQuery) {
jQuery.fn.blink = function(options) {
var defaults = { delay: 500 };
var options = jQuery.extend(defaults, options);

return this.each(function() {
var obj = jQuery(this);
var timerid = setInterval(function() {
if (obj.css("visibility") == "visible") {
obj.css('visibility', 'hidden');
}
else {
obj.css('visibility', 'visible');
}
}, options.delay);
obj.attr("timerid", timerid);
});
}
//
jQuery.fn.unblink = function(options) {
return this.each(function() {
var obj = jQuery(this);
if (obj.attr("timerid") > 0) {
clearInterval(obj.attr("timerid"));
obj.attr("timerid", 0);
obj.css('visibility', 'visible');
}
});
}
//
} (jQuery))

I improve your code to be

I improve your code to be this:

(function($) {

$.fn.blink = function() {

var defaults = { delay:500 };

var options = $.extend(defaults, options);

return this.each(function() {

var obj = $(this);

if(typeof obj.attr('delay') == 'undefined') {

obj.delay = options.delay;

}else{

obj.delay = obj.attr('delay');

}

setInterval(function() {

if($(obj).css("visibility") == "visible") {

$(obj).css('visibility','hidden');

}else{

$(obj).css('visibility','visible');

}

}, obj.delay);

});

}

}(jQuery))

and javascript usage:

<script type="text/javascript" language="javascript">>
$(document).ready(function() {

$('blink').blink();

});
</script>

html usage:
<blink delay="1000">this</blink> is some <blink>blinking</blink> text.

Perfect function exept an

Perfect function exept an error.
To use functions arguments,

replace
var defaults = { delay:500 };
var options = $.extend(defaults, options);

by
var defaults = { delay:500 };
var options = $.extend(defaults, arguments[0] || {});

Great little plugin. BUT a

Great little plugin. BUT a semi-colon is missing at the very end. When using tools to merge a few .js file, it screws up the other scripts merged after this one.

Cheers

Blink has absolutely ZERO

Blink has absolutely ZERO practical use on the internet, and all who were involved with initial blink tags, or their reincarnation through scripts should have their computers taken away for all eternity.

The ONLY thing worse than blink, is marquee.

For the love of god, please remove yourselves from inflicting visual trauma on the rest of the planet.

stfu you CUNT! Blinking text

stfu you CUNT! Blinking text !!~RULES~!!

I hadn't thought of it, a

I hadn't thought of it, a marquee plugin would be awesome too!

is there a way to make a

is there a way to make a version with NOCONFLICT?

nice

nice

Blink can very well be used

Blink can very well be used tastefully, and I am not against that, what I am against however is using visible which would cause the user to not be able to click the link when it is hidden.

So, if you do something, help the user enjoy it and think it all the way through.

1
2
3
4
5
if($(obj).css('blink') == true)
 $(obj).css('color','#ff0000');
else
 $(obj).css('color','#ffffff');
$(obj).css('blink',!$(obj).css('blink'));

The above code is simply a suggestion.

Helping just one person understand that "this web stuff" should not be all about blinky blinky, that it should be more about how the user fits into all of it, would make my day. Well.. half of it.. m I don`t actually care but it`s nice to be nice (as someone would say) it`s also nice to make people do what you say, hh, yeah, nice.

Have a NICE day.

Thanks for the plugin!

Thanks for the plugin!

Hi, It is all great but i

Hi,

It is all great but i need only little more.

Please can you make some changes like i can show the text for 3 seconds and hide only for 500ms.

Thanks,
Najm.

how stop the blink?

how stop the blink?

Hello, When modifying the

Hello,

When modifying the interval, the correct syntax is

// causes a 100ms blink interval.
$('.blink').blink({delay: 100});

It works great.

Thanks, I've fixed the text.

Thanks, I've fixed the text.

Thank you for the plugin

Thank you for the plugin

Thanks for this plug in! I'm

Thanks for this plug in!
I'm not a very big fan of blinking text but some customers demand it.

Thanks johnboker.

Thanks johnboker.

Hi thanks for the plugin this

Hi thanks for the plugin this helps me coz css blink is not working on IE.

Some customers demand it. And

Some customers demand it. And text-decoration:blink is not blinking in IE and Google Chrome.

Oh god please no! Why would

Oh god please no! Why would you possibly inflict the blink tag back onto the web using comunity? Have we learnt nothing?

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <drupal5>, <drupal6>, <html4strict>, <java>, <javascript>, <objc>, <php>, <python>, <ruby>, <tsql>.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
1 + 0 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
By submitting this form, you accept the Mollom privacy policy.