“puff of smoke” effect javascript sprite animation

Question

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.

Answer 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/

Answer 2

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