“抽烟”指的是效果javascript精灵动画 [英] "puff of smoke" effect javascript sprite animation

问题描述

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

相关的JS代码：

  function animatePoof（）{
 var bgTop = 0，
框架= 0，
框架= 6，
 frameSize = 32，
 frameRate = 80， 
 puff = $（'＃puff'）; 
 var animate = function（）{
 if（frame< frame）{
 puff.css（{
 backgroundPosition： 0 + bgTop + px 
 }）; 
 bgTop = bgTop-frameSize; 
 frame ++; 
 setTimeout（animate，frameRate）; 
} 
}; 
 
 animate（）; 
 setTimeout（ $（’＃puff’）。hide（），帧* frameRate）; 
} 
  

包含HTML和CSS的完整示例：
http://jsfiddle.net/Y7Ek4/22/

This code and animation works perfectly on jQuery 1.4.4 and below, but not on later versions. Could anyone shed some light on this issue and help with a version that works with latest jQuery. I have provided a fiddle below.

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

The poof effect basically relies on adjusting the background-position to create a css sprite animation, but it borked on new jQuery.

解决方案

jQuery's animate is no longer appropriate for sprite animations. I had to roll my own using setTimeout. The effect is inspired by the one used for removing items from OS X dock.

The sprite:

The relevant JS code:

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);
}

Full working example including HTML and CSS: http://jsfiddle.net/Y7Ek4/22/

这篇关于“抽烟”指的是效果javascript精灵动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！