javascript - "puff of smoke"效果javascript Sprite 动画

Question

此代码和动画在 jQuery 1.4.4 及以下版本上完美运行，但在更高版本上无法正常运行。任何人都可以阐明这个问题并帮助开发一个适用于最新 jQuery 的版本。我在下面提供了一个 fiddle 。

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

poof 效果基本上依赖于调整背景位置来创建 css sprite 动画，但它在新的 jQuery 上很无聊。

Answer 1

jQuery 的 animate 不再适用于 sprite 动画。我不得不使用 setTimeout 自己滚动。该效果的灵感来自用于从 OS X dock 中删除项目的效果。

Sprite :

相关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/