How to animate a background size using jquery

Question

I want to animate the background of my website so that when the user enters it, the background starts at a size of 60% and goes up until 100% over the course of several seconds.

I tried using animate in jQuery like below, but the console says 'Unexpected token -'. This worked for opacity in another piece of code.

What am I doing wrong?

$(document).ready(function() {
    $('.left-content').animate(
    {
        background-size: 100%
    },
    3000);
})

Answer 1

There are 2 problems with your code.

1. Missing quotes around 100%

2. JavaScript understands background-size as variable background minus variable size. You shoud use backgroundSize instead.

   $('.left-content').animate({ backgroundSize: '100%' }, 3000);

With these two corrections, it works. See:

http://jsfiddle.net/YuKj3/