トラックバック(0)javascriptでは"setInterval"や"clearInterval"を使ってちょっとしたアニメーションを実装することが出来る。透明度を0%にしてその後100分の1秒ごとに10%ずつ上げていく関数を定義し、それを呼び出す。透明度が100%に達したところでその関数をストップさせることで一瞬光ったような視覚効果を得られる。})}上の関数を適用したい要素のリスナー関数とすればいい。ちなみに上のコードはprototype.jsを使ってブラウザごとの挙動を吸収している。他にも背景色のスタイルを徐々に変えたり、要素自体をフェイドアウトしたりといろいろ出来るんだが今回は"ある要素に対してマウスオーバーしたとき背景色を変える""背景色を変えるとき左からスライドして変わっていくようにしたい"みたいなアニメーションを作ろうと思った。CSSの"background-color"プロパティで実現する方法が考えつかなかったので今回は"background-image"を使いそのポジションをずらしていくことで実装した。}}"backSlide"関数の注意点は"backSlide"関数事態がリスナー関数になっているわけではなく、その関数を呼び出すことで無名関数を生成しそれをリスナー関数としている。これはバックグラウンドに使う画像のURLとその画像サイズを引数として渡したいからだ。上の例では'images/backimage.gif'と'200'の部分だ。この関数の中身では背景イメージとなるbackimage.gifの'backgroundPosition'を200px左にずらすことで最初は全く見えない状態にしている。その後100分の1秒ごとに右に5pxずつずらしていき要素の横幅分ずれたときにストップをかけている。要素の横幅を得る関数が'evt.target.getWidth()'の部分だ。"mouseout"の時は真逆のことをやっている。これでidがheaderの中のliタグの中のa要素すべてにこのフラッシュで実装したようなアニメーションが適用される。この関数はあらかじめ背景のイメージを作成しておかないといけないのがちょっと面倒だが。