如何使用jquery为背景大小设置动画

Question

我想为我的网站的背景设置动画，以便当用户输入时，背景以60％的大小开始，并在几秒钟内上升到100％。

我尝试在jQuery中使用animate，如下所示，但控制台显示“意外令牌 - ”。这适用于另一段代码中的不透明度。

我做错了什么？

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

Answer 1

您的代码有两个问题。

1. 缺少100％的报价

2. JavaScript将background-size理解为变量background减去variable大小。你应该使用backgroundSize代替。

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

通过这两个更正，它可以工作。参见：

http://jsfiddle.net/YuKj3/

Answer 2

您需要在100%周围加上引号。之后，您也可以在background-size周围包围引号：

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

...或使用驼峰案例：

{
    backgroundSize: "100%"
}