Simple JavaScript Animation for 1 Second to Highlight Text? - Stack Overflow

admin管理员组

文章数量:1332865

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?

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?

• javascript

Share Improve this question Follow asked Nov 30, 2009 at 10:00 PassionateDeveloperPassionateDeveloper 15.2k3535 gold badges111111 silver badges190190 bronze badges 6

• Define "newer versions"? Describe the bug? Are you already using JQuery? – AnthonyWJones Commented Nov 30, 2009 at 10:03
• Do you have any reference sites? Or is it something like the one on SO, e.g. the highlight effect when you click stackoverflow./questions/1103519/… ? – o.k.w Commented Nov 30, 2009 at 10:11
• I am using jQuery the bug is, that the highlight stucks many times (sometimes in the middle, sometimes it never appear). It seems to hang up. Newer Versions = I see that bugs at IE8 & FF3 – PassionateDeveloper Commented Nov 30, 2009 at 10:11
• @OKW such an highlight would be pletly enough – PassionateDeveloper Commented Nov 30, 2009 at 10:12
• No offense intended, but usually the good JavaScript libraries are well-tested even on the newest beta browsers and in most cases the bug lies in the code of the user. – Boldewyn Commented Nov 30, 2009 at 10:32

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 5

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!

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

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);
};

本文标签： Simple JavaScript Animation for 1 Second to Highlight TextStack Overflow