"담배 연기"효과 자바 스크립트 스프라이트 애니메이션

Question

이 코드 및 애니메이션은 jQuery 1.4.4 및 이후 버전에서는 완벽하게 작동하지만 이후 버전에서는 작동하지 않습니다. 누구든지이 문제에 관해 밝히고 최신 jQuery와 함께 작동하는 버전을 도울 수 있습니까? 나는 아래에 바이올린을 제공했다.

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

휙 효과는 기본적으로 CSS 스프라이트 애니메이션을 만들 수있는 배경 - 위치를 조정에 의존하지만, 새로운 jQuery를에 borked.

Answer 1

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/

Answer 2

당신이 (내) 라이브러리를 사용할 수 있습니다 too Audero Smoke Effect. 그것은 최신 버전의 jQuery에서 작동합니다.