How to animate background size using jquery

Question

I want to animate the background of my website so that when a user enters it, the background starts at 60% and increases to 100% in a few seconds.

I tried using animation in jQuery as shown below, but the console says "Unexpected token -". This worked on opacity in another piece of code.

What am I doing wrong?

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

Answer 1

You have 2 problems with your code.

• Missing quotes about 100%

• JavaScript understands background-sizeas a backgroundminus variable variable. Instead you use backgroundSize.

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

It works with these two fixes. Cm:

http://jsfiddle.net/YuKj3/

Answer 2

100%. background-size:

{
    "background-size": "100%"
}

... :

{
    backgroundSize: "100%"
}