「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);
};
と、意外と冗長になってしまいました。
もっとすっきり書ける方法なかったっけ?