Happy Programming

function(evt) {
    var opacity = 0;
    var opplus = function() {
        opacity += 10;
        if (opacity >= 100) {
            opacity = 100;
            clearInterval(timeId);
        }
        evt.target.setOpacity(opacity / 100);
    }
    var timeId = setInterval(opplus, 100);
    evt.target.observe("mouseout", function(evt) {
        clearInterval(timeId);
        evt.target.setOpacity(1);
    })
}

上の関数を適用したい要素のリスナー関数とすればいい。
ちなみに上のコードはprototype.jsを使ってブラウザごとの挙動を吸収している。
他にも背景色のスタイルを徐々に変えたり、要素自体をフェイドアウトしたりといろいろ出来るんだが今回は

"ある要素に対してマウスオーバーしたとき背景色を変える"
"背景色を変えるとき左からスライドして変わっていくようにしたい"

みたいなアニメーションを作ろうと思った。
CSSの"background-color"プロパティで実現する方法が考えつかなかったので今回は"background-image"を使いそのポジションをずらしていくことで実装した。
ソースは

$$('#header li a').invoke("observe", "mouseover", backSlide('images/backimage.gif', 200));

function backSlide(imgURL, imgSize) {
    return function(evt) {
      var obWidth = evt.target.getWidth();
      var backWidth = initialBackWidth = -imgSize;
      var backPlus = function() {
          backWidth += 5;
          if (backWidth >= (initialBackWidth + obWidth)) {
              backWidth = (initialBackWidth + obWidth);
              clearInterval(timeId);
          }
          Element.setStyle(evt.target, {
              backgroundImage: 'url("' + imgURL + '")',
              backgroundRepeat: 'no-repeat',
              backgroundPosition: backWidth + 'px'
          });
      }
      var timeId = setInterval(backPlus, 10);
      evt.target.observe("mouseout", function(evt) {
          if (timeId) clearInterval(timeId);
          var backMinus = function() {
              backWidth -= 5;
              if (backWidth <= initialBackWidth) {
                  backWidth = initialBackWidth;
                  clearInterval(timeId2);
              }
              Element.setStyle(evt.target, {
                  backgroundPosition: backWidth + 'px'
              });
          }
          var timeId2 = setInterval(backMinus, 10);
      });
    }
}

"backSlide"関数の注意点は"backSlide"関数事態がリスナー関数になっているわけではなく、その関数を呼び出すことで無名関数を生成しそれをリスナー関数としている。
これはバックグラウンドに使う画像のURLとその画像サイズを引数として渡したいからだ。
上の例では'images/backimage.gif'と'200'の部分だ。

この関数の中身では背景イメージとなるbackimage.gifの'backgroundPosition'を200px左にずらすことで最初は全く見えない状態にしている。
その後100分の1秒ごとに右に5pxずつずらしていき要素の横幅分ずれたときにストップをかけている。
要素の横幅を得る関数が'evt.target.getWidth()'の部分だ。
"mouseout"の時は真逆のことをやっている。

これでidがheaderの中のliタグの中のa要素すべてにこのフラッシュで実装したようなアニメーションが適用される。 ただこの関数はあらかじめ背景のイメージを作成しておかないといけないのがちょっと面倒だが。