www.antiyes.com

Actually, here's is the complete updated script, as it requires modification of the unblink function as well. This allows blinking without affecting your color choices and without making the element unclickable, because it uses opacity changes instead of color changes or visibility changes.

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("opacity") == "1")
                          {
                                  $(obj).css('opacity','0');
                          }
                          else
                          {
                                  $(obj).css('opacity','1');
                          }
                  }, options.delay);
                  obj.attr("timerid", timerid);
          });
  }
  $.fn.unblink = function(options) 
  {
          var defaults = { opacity:1 };
          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('opacity', options.opacity?'1':'0');
                  }
          });
  }
}(jQuery))

The script given in comment #3 is great, and the comment about it making the blinking element in comment #22 is correct. As an alternative to visibility in the #3 and color-switching in #2, one can also set opacity:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.
.
.
if($(obj).css("opacity") == "1")
{
   $(obj).css('opacity','0');
}
else
{
   $(obj).css('opacity','1');
}
.
.
.

And this way your blinking is decoupled from your color choice.

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.

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

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 for the Script.. Really helped....... is there is any way or workaround to assign dynamic text (alternate text to be dynamic)

Half of my bookmark bar is stuffed with your pages. My spouse and i find your post really interesting and just wanted to thank you for the work that you do.

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 useful...thanks

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 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 plugin available on http://www.joomtrax.com.
This can blink more than one text at a time.

Thanks for this useful plugin! You're great!

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

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

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

is there a way to make a version with NOCONFLICT?

nice

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

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!

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?

Hello,

When modifying the interval, the correct syntax is

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

It works great.

Thank you for the plugin

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

Thanks johnboker.

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

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

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