I recently wanted to make a

element in a div with the ID of "test" to have a "blink" effect like most text editors have where the cursor is hidden and then shown, then hidden and shown....(in a loop) I tried to recreate this effect but just couldn't get it to work. Please help!

Here is some code:

<div id="test"> <p> _ </p> </div>

I recently wanted to make a

element in a div with the ID of "test" to have a "blink" effect like most text editors have where the cursor is hidden and then shown, then hidden and shown....(in a loop) I tried to recreate this effect but just couldn't get it to work. Please help!

Here is some code:

<div id="test"> <p> _ </p> </div>

• javascript
• jquery
• html
• css

• 2 How about the <blink> tag ? – adeneo Commented Jan 10, 2014 at 22:32
• 1 <blink> is deprecated :( developer.mozilla/en-US/docs/Web/HTML/Element/blink and browser support is very poor – Chris Bier Commented Jan 10, 2014 at 22:33
• 1 How about posting some of your js code? – Daniel Gasser Commented Jan 10, 2014 at 22:34
• @ChrisB - It was a joke, and even the wikipedia page for the blink tag has a javascript solution, so this should be easy to figure out. – adeneo Commented Jan 10, 2014 at 22:34
• see this stackoverflow./questions/5205445/… it will help you – 2dar Commented Jan 10, 2014 at 22:41

6 Answers 6

Something like this?

setInterval(function(){
     $("#test p").toggle();
},3000);

blinks every 3 seconds.

Here's a concise, pure JavaScript way.

blink = setInterval(function () {
  element = document.querySelector("#test p");
  element.style.opacity = (element.style.opacity == 1 ? 0 : 1);
}, 500);

If you want to stop it, run clearInterval(blink).

Here's a working fiddle.

FIDDLE

setInterval(function(){
     $("#test p").toggle();
},300);

Here is an example using Javascript

setInterval(function(){
    var elem = document.querySelector("#test p");
    if(isVisible(elem)) {
    elem.style.display = 'none';
    } else {
    elem.style.display = 'block';
    }
},500);

function isVisible(elem) {
  return elem.offsetWidth > 0 || elem.offsetHeight > 0;
}

(Though knouroozi's answer will stop the contents from shifting around, so I'd suggest that.)

With JQuery it bees simpler:

setInterval(function(){
    $('#test p').toggle();
},500);

(stckrboy's answer covers toggling visibility, rather than 'display', which will prevent the content from shifting around.)

Here's an example using jQuery and setInterval

$(".crsr").each(function(){
    var elem=$(this);
    setInterval( function() {
        if(elem.css('visibility')=='hidden') {
            elem.css('visibility','visible')
        } else {
            elem.css('visibility','hidden')
        }
    },500)
});

jSFiddle

Throwing my approach into the ring. :) Set up a class that changes the visibility to hidden and then use setInterval and toggleClass to toggle the class off and on.

HTML

<div id="blinkingText">
    Blink for me!
</div>

CSS

<style>
    .blinkOn {visibility: hidden;}
</style>

JS

<script type="text/javascript">
    $(document).ready(function(){
        setInterval(function() {
            $("#blinkingText").toggleClass("blinkOn");
        },1000);
    });
</script>