JavaScript -Cambio de color CSS durante 5 segundos

Question

Estoy tratando de hacer una forma de resaltar brevemente el texto en enlaces con nombre, pero solo por unos segundos.

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

Así que en una lista de preguntas frecuentes - Salta a la identificación apropiada, cambia el color a rojo durante unos segundos como una señal visual para el usuario final (la respuesta está aquí). pero luego vuelve al color normal y el intervalo se completa.

¿Cómo hago para que la función anterior funcione solo durante un período de tiempo determinado?

Answer 1

probar esto:

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

y en el html:

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

esta función funcionará para cualquier objeto que le pase :-)

aquí es un violín de trabajo: http://jsfiddle.net/maniator/dG2ks/

Answer 2

Escriba una función para cambiarla de nuevo (estableciendo la misma propiedad en una cadena vacía). Ejecutarlo utilizando setTimeout

Answer 3

Puede utilizar 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 4

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

Answer 5

Prueba esto:

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

Algunos JS:

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

Algunos HTML:

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