JavaScript - Change CSS color in 5 seconds

Question

I try to briefly highlight the text on named links - but only for a few seconds.

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

So, in the list of frequently asked questions - it jumps to the correct identifier, changes color to red for a few seconds as a visual signal for the end user (the answer is here). but then returns to normal color and the interval is completed.

How to make the above function work only for a certain period of time?

Answer 1

try the following:

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

and in html:

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

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

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

Answer 2

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> 

Answer 3

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

Answer 4

Try the following:

 <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> 

Answer 5

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')"> 

Answer 6

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