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

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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

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