2012-04-13 79 views
2

此代碼和動畫在jQuery 1.4.4及更高版本上完美工作,但不適用於更高版本。任何人都可以解釋一下這個問題,並幫助使用最新jQuery的版本。我在下面提供了一個小提琴。「煙燻」效果javascript sprite動畫

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

的噗效果基本上依賴於調節所述背景位置以創建CSS子畫面的動畫,但它在新的jQuery borked。

+0

你需要一個插件。請參閱http://bugs.jquery.com/ticket/7448 – j08691 2012-04-13 21:12:22

+0

可能的重複[爲什麼我不能動畫backgroundPosition過去jQuery 1.4.4?](http://stackoverflow.com/questions/8663596/why-cant-我 - 動畫 - backgroundposition得票jQuery的1-4-4) – j08691 2012-04-13 21:12:42

回答

4

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/

0

你可以使用這個(礦)庫太:Audero Smoke Effect。它適用於最新版本的jQuery。