Simple JavaScript Animation for 1 Second to Highlight Text?

Question

Hi guys,

I searched by google but I found that much I can't overview it all, so I need your experience:

I need to highlight a text for 1 second. For example a simple "blink"-effect with a color or something like that.

I tried JQuery-Animation allready but it seems very bugged with newer versions of Firefox / Internet Explorer.

So do you have an idea?

Answer 1

look for setTimeout() which executes a code some time in the future and clearTimeout() which cancels the setTimeout()

Answer 2

var h = document.getElementById("highlight");
window.onload = function () {
  // when the page loads, set the background to red
  h.style.backgroundColor = "#f00";

  // after 1 second (== 1000ms)
  window.setTimeout(function () {
    // ...revert this, use the original color
    h.style.backgroundColor = "";
  }, 1000);
};

Answer 3

function highlightFor(id,color,seconds){
    var element = document.getElementById(id)
    var origcolor = element.style.backgroundColor
    element.style.backgroundColor = color;
    var t = setTimeout(function(){
       element.style.backgroundColor = origcolor;
    },(seconds*1000));
}

should work. Supply it with the id of the element, the highlight color and the time you want the highlight to display for (in seconds). For example

highlightFor('object','yellow',3);

EDIT: As far as colours set in stylesheets is concerned, I strongly suggest using a javascript library (like jQuery). I know you say that you've had some problems with it, but it's most likely there's a tiny bug in the code you've written that's giving you that opinion. Just ask on SO if you have any questions about jQuery!