“一团烟雾”效果 javascript sprite 动画答案

【问题标题】："puff of smoke" effect javascript sprite animation“一团烟雾”效果 javascript sprite 动画
【发布时间】：2012-04-13 21:04:38
【问题描述】：

此代码和动画在 jQuery 1.4.4 及更低版本上完美运行，但不适用于更高版本。任何人都可以对这个问题有所了解，并帮助提供适用于最新 jQuery 的版本。我在下面提供了一个小提琴。

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

poof 效果基本上是依靠调整背景位置来创建 css sprite 动画，但它在新的 jQuery 上很糟糕。

【问题讨论】：

你需要一个插件。见bugs.jquery.com/ticket/7448
Why can't I animate backgroundPosition past jquery 1.4.4?的可能重复

标签： javascript animation settimeout jquery-animate

【解决方案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/

【讨论】：

【解决方案2】：

您也可以使用这个（我的）库：Audero Smoke Effect。它适用于最新版本的 jQuery。

【讨论】：