“puff of smoke” effect javascript sprite animation

问题:

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.

回答1:

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/

回答2:

You could use this (mine) library too: Audero Smoke Effect. It works with the latest version of jQuery.