JavaScript -Изменить цвет CSS на 5 секунд

Question

Я пытаюсь сделать способ краткого выделения текста на именованных ссылках - но только на несколько секунд.

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

Так что в списке часто задаваемых вопросов - он переходит на правильный идентификатор, измененияцвет на красный в течение нескольких секунд как визуальный сигнал конечному пользователю (ответ здесь).но затем возвращаемся к нормальному цвету и интервал завершен.

Как мне заставить вышеуказанную функцию работать только в течение установленного периода времени?

Answer 1

попробуйте это:

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

и в html:

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

эта функция будет работать для любого объекта, который вы ей передаете: -)

вот рабочая скрипка: http://jsfiddle.net/maniator/dG2ks/

Answer 2

Вы можете использовать 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

Некоторые JS:

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

Некоторые HTML:

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

Answer 4

Попробуйте это:

<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

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

Answer 6

Напишите функцию, чтобы изменить ее обратно (установив то же свойство в пустую строку).Запустите его, используя setTimeout