此代码和动画在 jQuery 1.4.4 及更低版本上完美运行,但不适用于更高版本。任何人都可以对这个问题有所了解,并帮助提供适用于最新 jQuery 的版本。我在下面提供了一个小提琴。
poof 效果基本上依赖于调整背景位置来创建 css sprite 动画,但它在新的 jQuery 上很糟糕。
此代码和动画在 jQuery 1.4.4 及更低版本上完美运行,但不适用于更高版本。任何人都可以对这个问题有所了解,并帮助提供适用于最新 jQuery 的版本。我在下面提供了一个小提琴。
poof 效果基本上依赖于调整背景位置来创建 css sprite 动画,但它在新的 jQuery 上很糟糕。
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/
你也可以使用这个(我的)库:Audero Smoke Effect。它适用于最新版本的 jQuery。