"煙の煙"効果JavaScriptのスプライトアニメーション

Question

このコードとアニメーションは、jQuery 1.4.4以降では完全に機能しますが、それ以降のバージョンでは機能しません。誰もがこの問題について啓発し、最新のjQueryで動作するバージョンを手助けすることができますか？私は下のフィドルを提供しました。

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

パッと消える効果は基本的にCSSスプライトアニメーションを作成するために、背景の位置を調整するに依存しているが、それは新しいjQueryの上borked。

Answer 1

jQueryのアニメーションはスプライトアニメーションに適していません。 setTimeoutを使って自分自身をロールバックしなければならなかった。この効果は、OS Xドックからアイテムを取り除くために使用されたものに触発されています。

スプライト：

関連のJSコード：HTMLやCSSなどの

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); 
} 

全作業例： http://jsfiddle.net/Y7Ek4/22/

Answer 2

あなたはこの（私の）ライブラリを使用することができますあまりにも：Audero Smoke Effect。これはjQueryの最新バージョンで動作します。