“烟雾缭绕”效果javascript精灵动画

时间:2012-04-13 21:04:39

标签: javascript animation settimeout jquery-animate

这段代码和动画在jQuery 1.4.4及更低版本上运行得很好,但在以后的版本中却没有。任何人都可以解释这个问题,并帮助一个适用于最新jQuery的版本。我在下面提供了一个小提琴。

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

poof效果基本上依赖于调整背景位置来创建一个css sprite动画,但是它对新的jQuery很不满意。

2 个答案:

答案 0 :(得分:5)

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

精灵:

poof effect 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/

答案 1 :(得分:0)

你也可以使用这个(我的)图书馆:Audero Smoke Effect。它适用于最新版本的jQuery。