Question

I need to animate a background image and am using the code

        $('div.holder-inner').css({backgroundPosition: '0px 0px'});

    $('#up').click(function(){
        // alert('!');
        $('div.holder-inner').animate({
            backgroundPosition: '200px 10px'
        });
    });

Which fails to work.. it does however work if I amend the backgroundPosition to only contain one value rather than two like so

            backgroundPosition: '200px'

Tested in firefox 6 and chrome – and produces the same result in both – animates with a single value and does nothing with two values.

Any ideas?

Answer 1

jQuery standard animate does not work with backgrounds.

Check this thread for explanation: jQuery animate backgroundColor and this plugin for solution http://www.protofunc.com/scripts/jquery/backgroundPosition/