“抽煙”效果javascript精靈動畫

Question

這段代碼和動畫可以在jQuery 1.4.4及更低版本上完美運行，但不能在更高版本上使用。 任何人都可以在這個問題上闡明一些問題，並提供適用於最新jQuery的版本的幫助。 我在下面提供了一個小提琴。

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

poof效果基本上依賴於調整背景位置來創建css sprite動畫，但是在新的jQuery上卻令人厭煩。

Answer 1

jQuery的動畫不再適用於Sprite動畫。 我不得不使用setTimeout自己滾動。 該效果是受用於從OS X擴展塢中刪除項目的啟發。

精靈：

相關的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

您也可以使用這個（mine）庫： Audero Smoke Effect 。 它適用於最新版本的jQuery。