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.

/

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

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/Y7Ek4/10/

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

• javascript
• animation
• settimeout
• jquery-animate

• You need a plugin for this. See bugs.jquery./ticket/7448 – j08691 Commented Apr 13, 2012 at 21:12
• possible duplicate of Why can't I animate backgroundPosition past jquery 1.4.4? – j08691 Commented Apr 13, 2012 at 21:12

2 Answers 2

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/Y7Ek4/22/

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