javascript - 「煙のパフ」効果javascriptスプライトアニメーション

Question

このコードとアニメーションは、jQuery 1.4.4以下では完全に機能しますが、それ以降のバージョンでは機能しません。誰かがこの問題に光を当て、最新のjQueryで動作するバージョンを手伝ってもらえますか？以下にフィドルを用意しました。

http://jsfiddle.net/Y7Ek4/10/

poof効果は、基本的に背景位置を調整してcssスプライトアニメーションを作成することに依存していますが、新しいjQueryでは失敗しました。

Answer 1

jQueryのアニメーションは、スプライトアニメーションには適していません。を使用して自分でロールする必要がありましたsetTimeout。この効果は、OSXドックからアイテムを削除するために使用されるものに触発されています。

スプライト：

関連するJSコード：

function animatePoof() {
    var bgTop = 0,
        frame = 0,
        frames = 6,
        frameSize = 32,
        frameRate = 80,
        puff = $('#puff');
    var animate = function(){
        if(frame < frames){
            puff.css({
                backgroundPosition: "0 "+bgTop+"px"
            });
            bgTop = bgTop - frameSize;
            frame++;
            setTimeout(animate, frameRate);
        }
    };

    animate();
    setTimeout("$('#puff').hide()", frames * frameRate);
}

HTMLとCSSを含む完全な実例：http： //jsfiddle.net/Y7Ek4/22/

Answer 2

この（私の）ライブラリも使用できます：AuderoSmokeEffect。最新バージョンのjQueryで動作します。