Javascript hide and show a div in a loop for a text "blink" effect

Question

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>

`` is deprecated :( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink and browser support is very poor — Chris Bier, Jan 10 '14 at 22:33
@ChrisB - It was a joke, and even the [wikipedia page for the blink tag](http://en.wikipedia.org/wiki/Blink_element) has a javascript solution, so this should be easy to figure out. — adeneo, Jan 10 '14 at 22:34
see this http://stackoverflow.com/questions/5205445/jquery-blinking-highlight-effect-on-div it will help you — 2dar, Jan 10 '14 at 22:41

score 5 · Accepted Answer · answered Jan 10 '14 at 22:34

5

Something like this?

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

blinks every 3 seconds.

answered Jan 10 '14 at 22:34

Nagendra Rao

7,016
5
54
92

Thank you very much for your post! it worked!! (I'm a little new to web programming) – user3183679 Jan 10 '14 at 22:37
glad it helped! If this answer satisfies, mark it as accepted and close the thread, thanks! – Nagendra Rao Jan 10 '14 at 22:40
Note: This will also remove any sizing that the `
` tag provides, because it uses the `display` style. If you want the layout to remain, but the visibility to go on and off, you want to use something that alters the `visibility` style.
– talemyn Jan 10 '14 at 22:45
True, in that case you can do, `setInterval(function(){ if ( $('#test p').css('visibility') == 'hidden' ) $('#test p').css('visibility','visible'); else $('#test p').css('visibility','hidden'); },3000);` – Nagendra Rao Jan 10 '14 at 22:49

knrz · Answer 2 · 2014-01-10T22:41:22.237

3

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.

edited Jan 10 '14 at 22:41

answered Jan 10 '14 at 22:36

knrz

1,801
1
12
15

score 1 · Answer 3 · edited May 23 '17 at 12:23

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 becomes simpler:

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

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

You're welcome. You had the more elegant JS solution :) – Hanna Jan 10 '14 at 22:44 — Hanna, Jan 10 '14 at 22:44

score 1 · Answer 4 · answered Jan 10 '14 at 22:37

1

FIDDLE

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

answered Jan 10 '14 at 22:37

Merlin

4,907
2
33
51

score 0 · Answer 5 · answered Jan 10 '14 at 22:40

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

score 0 · Answer 6 · answered Jan 10 '14 at 22:48

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>

Javascript hide and show a div in a loop for a text "blink" effect

6 Answers6