Animating background position works on jQuery 1.4.4 but not on 1.7.2

Question

I've run into a problem.

I have a script i'm tinkering with. All runs fine but only on jQuery 1.4.4. When I move up a version, let's say the latest (1.7.2) the script will not run. What gives?!

var bouncespeed = 450;

function bounce(currentA) {
    newx = Math.floor(10 * Math.random());
    newy = Math.floor(3 * Math.random());
    newspeed = bouncespeed + Math.floor(10 * Math.random());
    $(currentA).animate({
        backgroundPosition: newx + 'px ' + newy + 'px'
    }, newspeed, 'linear', function() {
        bounce(currentA);
    });
}

$('.bubble').each(

function() {
    $(this).css({
        backgroundPosition: '5px 5px'
    });
    bounce(this);
});

Play time!: http://jsfiddle.net/mdecler/rgBeW/2/

Answer 1

It's a documented bug (http://bugs.jquery.com/ticket/8160) affecting jQuery from version 1.5. So actually there's no way to animate that property on jQuery 1.7.2

You could instead use .css() instead of animate and then call the function with a small timeout, but the effect would be not really smooth

Otherwise do instead an animation over the div itself, changing their margin-top/left properties