Text blinking jQuery

Viewed 166398

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

35 Answers

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

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

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

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

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>

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

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>

result

$('.blink').fadeIn('fast')
    .animate({
        color: "#FFCD56"
    }, 100).animate({
        color: "white"
    }, 100)
    .animate({
        color: "#FFCD56"
    }, 100).animate({
        color: "white"
    }, 100)
    .animate({
        color: "#FFCD56"
    }, 100).animate({
        color: "white"
    }, 100)
    .animate({
        color: "#FFCD56"
    }, 100).animate({
        color: "white"
    }, 100)
    .animate({
        color: "#FFCD56"
    }, 100).animate({
        color: "white"
    }, 100);

Try this :

setInterval( function() { $(".me").fadeOut(500).fadeIn(500) } , 500);
Related