“烟吞云吐雾”的效果的JavaScript精灵动画(“puff of smoke” effect j

此代码和动画完美的作品上的jQuery 1.4.4及以下，但不能在以后的版本。 任何人都可以摆脱在这个问题上的一些光，并用同最新的jQuery工作的版本帮助。 我在下面提供了一个小提琴。

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

在噗效果主要依靠调整背景位置以创建CSS精灵动画，但在新的jQuery borked。

Answer 1:

jQuery的动画不再适合精灵动画。 我不得不滚我自己使用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:

你可以使用这个（我的）库太： Audero烟雾效果 。 它的工作原理与jQuery的最新版本。

文章来源: “puff of smoke” effect javascript sprite animation