CSS3/Javascriptで「ハイライト」エフェクトを作成するにはどうすればよいですか？

Question

私は、テキストのスパンを持っています。クリックするとその背景色を変えて強調表示されます。ハイライトをアニメーション化して、実際にテキストを強調表示しているかのように、背景色が左から右に向かって徐々に変化するようにしたいと思います。それがどのようにCSS3やJavascript/jQueryで達成できるかについての考えはありますか？

Answer 1

あなたには、いくつかのCSS3のみの機能で大丈夫なら、あなたはトランジション、グラデーションやbackground-size使用することができます。

.highlightable { 
    background-size: 0 100%; 
    background-repeat: no-repeat; 
    -webkit-transition: background-size 0.5s ease-out; 
    -moz-transition: background-size 0.5s ease-out; 
    -ms-transition: background-size 0.5s ease-out; 
    -o-transition: background-size 0.5s ease-out; 
    transition: background-size 0.5s ease-out; 
} 

.highlightable.highlight { 
    background-image: -webkit-linear-gradient(yellow, yellow); 
    background-image: -moz-linear-gradient(yellow, yellow); 
    background-image: -ms-linear-gradient(yellow, yellow); 
    background-image: -o-linear-gradient(yellow, yellow); 
    background-image: linear-gradient(yellow, yellow); 
    background-size: 100% 100%; 
}​ 

Here's a demo.

Answer 2

JavaScriptライブラリの多くは、たとえば、これはかなり簡単に私のお気に入りの作る：私はあなたがあなたの背景には、各タイムスライスで持つようにしたい進仲介色の値を持つ配列を設定しますライブラリせずにそれ以外の場合はYUI

を。 setTimeout()メソッドを使用して背景色をすばやく連続して変更します。例えば

setTimeout("document.getElementById('mySpan').style.backgroundColor = myColors[i]; i++;", 50);