CODEWITHSUNDEEP
javascriptanimationsettimeoutjquery-animate
fmalina
fmalina

Reputation: 6310

"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.

Upvotes: 5

Views: 6052

Answers (2)

fmalina
fmalina

Reputation: 6310

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:

poof effect 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/

Upvotes: 9

Aurelio De Rosa
Aurelio De Rosa

Reputation: 22162

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

Upvotes: 0

Related Questions