“烟熏”效果javascript sprite动画

Question

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

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

的噗效果基本上依赖于调节所述背景位置以创建CSS子画面的动画，但它在新的jQuery borked。

Answer 1

jQuery的动画不再适用于精灵动画。我必须使用setTimeout推出我自己的产品。效果受到用于从OS X dock移除项目的影响。

的精灵：

相关的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 Smoke Effect。它适用于最新版本的jQuery。