JavaScript -Change CSS color for 5 seconds

Question

I am trying to make a way of briefly highlighting the text on named links - but only for a few seconds.

<a href="#faq1"onClick="document.getElementById('faq1').style.color='#f00'">

So on a list of FAQs - it jumps to the proper ID, changes the color to red for a few seconds as a visual cue to the end user (the answer is here). but then returning to normal color and the interval is complete.

How do I make the above function to work for only a set period of time?

jQuery UI has a nice [Highlight effect](http://jqueryui.com/demos/effect/) (See the drop-down on the demo page). This is actually used here on SO. I know adding jQuery is overkill for this but maybe you can work it into the rest of your site. Just a thought. :) — Richard Marskell - Drackir, Apr 08 '11 at 20:22

Naftali · Accepted Answer · 2011-04-08T20:28:28.477

12

try this:

function highlight(obj){
   var orig = obj.style.color;
   obj.style.color = '#f00';
   setTimeout(function(){
        obj.style.color = orig;
   }, 5000);
}

and in the html:

<a href="#faq1" onClick="highlight(document.getElementById('faq1'));">

this function will work for any object you pass to it :-)

here is a working fiddle: http://jsfiddle.net/maniator/dG2ks/

edited Apr 08 '11 at 20:28

answered Apr 08 '11 at 20:23

Naftali

144,921
39
244
303

love the solution and ability to pass the ID to the function. works perfect for me since I have 20 FAQ questions. allows me to not repeat code. Thank you! – Chris Apr 08 '11 at 22:53

score 3 · Answer 2 · answered Apr 08 '11 at 20:22

You can use window.setTimeout()

<a href="#faq1" onClick="highlight()">

<script type="text/javascript">
    function highlight() {
        var el = document.getElementById('faq1');
        var original = el.style.color;
        el.style.color='#f00';
        window.setTimeout(function() { el.style.color = original; }, 5000);
    }
</script>

score 0 · Answer 3 · answered Apr 08 '11 at 20:21

0

Write a function to change it back (by setting the same property to an empty string). Run it using setTimeout

answered Apr 08 '11 at 20:21

Quentin

914,110
126
1,211
1,335

score 0 · Answer 4 · answered Apr 08 '11 at 20:24

Try this:

<a id="faqLink" href="#faq1">FAQ Link</a>
<script type="text/javascript">
 document.getElementById('faqLink').onclick = function(e){
    e = e || window.event;
    var srcEl = e.target || e.srcElement;
    var src = document.getElementById("faq1");
    var prevColor = src.style.color;
    src.style.color = '#f00';
    setTimeout(function(){
        src.style.color = prevColor;
    }, 5000); //5 seconds
 }
</script>

score 0 · Answer 5 · answered Apr 08 '11 at 20:28

0

Some JS:

<script type='text/javascript'>
     function changeColor(element, color){
        document.getElementById(element).style.color = color
        setTimeout(function(){ changeColor(element, '#000') }, 5000)
     }
</script>

Some HTML:

<a href="#faq1" onClick="changeColor('faq1', '#f00')">

answered Apr 08 '11 at 20:28

Chris Sobolewski

12,819
12
63
96

that is assuming the orig color was `#000` – Naftali Apr 08 '11 at 20:30
also this ends up in an infinite loop! – Naftali Apr 08 '11 at 20:40

Andrei Cleland · Answer 6 · 2021-11-30T06:21:39.007

This class and function will give a subtle flash to any element, drawing attention to it for a default of 3 sec when the function is called. (If you call the function for more than 3 sec it only flashes for 3 sec and is just slightly brighter after that)
You may wish to remove the border to make it more subtle.
Increase the alpha (a) in the border and background to make it less subtle.

    const myElement = document.getElementById("myElement");

    function emphasise(element, time = 3) {
       element.classList.add("emphasise");
       setTimeout(function() {
         element.classList.remove("emphasise")
       }, time * 1000);
    }

    function myFunction() {
       myElement.innerText = 'kickable, throwable, punchable';
       emphasise(myElement, 4);
    }

.emphasise {
  border: 2px dotted rgba(255, 122, 122, 0.5) !important; 
  border-radius: 3px;
  filter: brightness(115%);
  animation: highlight 3s;
}
@keyframes highlight {
  0% { background: hsla(50, 50%, 60%, 0.3)}
  11% { background: none }
  22% { background: hsla(50, 50%, 60%, 0.3) }
  33% { background: none }
  44% { background: hsla(50, 50%, 60%, 0.3)}
  56% { background: none }
  67% { background: hsla(50, 50%, 60%, 0.3) }
  78% { background: none }
  89% { background: hsla(50, 50%, 60%, 0.3) }
  100% { background: none }
}
    body{ background: beige }
    button{ padding: 10px,20px }

<p>Hardware: <br>the <span id="myElement">physical</span> components of a computer
    </p>
    <button onclick="myFunction()">
     click me
    </button>

see it in JSFiddle here

score -1 · Answer 7 · edited Apr 08 '11 at 20:24

-1

$('#faq1').css('color', '#f00');
setTimeout(function() {$('#faq1').css('color', '#000'); }, 5000);

edited Apr 08 '11 at 20:24

David Thomas

249,100
51
377
410

answered Apr 08 '11 at 20:23

NKCSS

2,716
1
22
38

why would u use jQuery for something so trivial, **and** the op is not using jquery that i can see – Naftali Apr 08 '11 at 20:25
jQuery is the standard for browser independant DOM modification. As soon as you enter that area, why not do it properly? – NKCSS Apr 08 '11 at 20:29
why is it `standard`? its not standard for everyone. there are so many other DOM modifcation libraries – Naftali Apr 08 '11 at 20:32

JavaScript -Change CSS color for 5 seconds

7 Answers7

Linked