How to create a jQuery button with blinking text without changing the background colour?

javascript, jquery

Solution

You just have to call the animated function again after it has completed, like this.

var blink = function() {
    $('a').animate({
        opacity: '0'
    }, function(){
        $(this).animate({
            opacity: '1'
        }, blink);
    });
}

blink();

Demo

If you don't want the background color to fade you may have to use a bit of css like this.

CSS:

a{
    transition: color 200ms ease;
    background:skyblue;
}

a.blink{
    color:transparent;
}

Javascript:

window.setInterval(function(){
    $('a').toggleClass('blink');
}, 500);

Demo

Problem

I have a link and I would like the text contained in that link to blink (continuously) using jQuery. ``` <a href="#" class="blink">Button</a> ``` This is what I've got: ``` $(function() { blinking($(".blink")); }); function blinking(elm) { timer = setInterval(blink, 10000); function blink() { elm.fadeOut(5000, function() { elm.fadeIn(5000); }); } } ``` It works but it fades out both the link text and the link's background colour. This is my css: ``` .blink { color: white; background-color: green; } ``` How can I get it to fade in/out the text only? Thanks for any help.

Original source