「IE」と「透過PNG」。この二つを並べるとイヤ~な気持ちになるコーダーの方は多いと思いますが、ご多分に漏れず、私もその一人です。どうしても透過PNGのフェード処理を入れたい案件があったので、background-imageにアニメのコマを並べた一枚の画像を指定して、background-positionをずらしてく方法を使ったのですが、このアニメーションの部分をjQueryで書くと、
// frameCountは画像に並べたコマの数(左から右へ横に並べる) // frameWidthはコマの横ピクセル数 // bgTopはbackground-positionのTop位置 // thisは適用するjQueryオブジェクトのセレクタ for (var i = 0; i < frameCount; i++){ setTimeout(function(i, t){ return function(){ $(t).css( 'background-position', (i * frameWidth - frameWidth * (frameCount - 1)) + 'px ' + bgTop ); }; }(i, this), i * 40); };
と、意外と冗長になってしまいました。
もっとすっきり書ける方法なかったっけ?