此代码和动画在 jQuery 1.4.4 及更低版本上完美运行,但不适用于更高版本。任何人都可以阐明这个问题并帮助开发一个适用于最新 jQuery 的版本。我在下面提供了一个小提琴。
http://jsfiddle.net/Y7Ek4/10/ http://jsfiddle.net/Y7Ek4/10/
poof 效果基本上依赖于调整背景位置来创建 css 精灵动画,但它在新的 jQuery 上失败了。
jQuery animate 不再适合精灵动画。我必须自己使用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/ http://jsfiddle.net/Y7Ek4/22/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)