Jquery 放大身体背景的效果

我想在页面加载时放大我身体的背景图像。下面是我的代码

CSS:

JQuery：

 $( document ).ready(function() {         
          $(document.body).css("background-size", "140%");
      });

---

我正在尝试更改页面加载时图像的

背景大小

属性。但这是行不通的。我做错了什么？

为什么不在css中实现缩放效果？

body, html { 
    font-size: 100%; 
    padding: 0;
    margin: 0;   
    background-image: url(bg.jpg); 
    background-size: 140%;
    transition: all ease-in 5s;   
}

---

@sooraj只需像演示一样设置高度和宽度

$（文档）.ready（函数（）{
$（document.body）.css（“背景大小”，“140%”）；
});
body，html{
字体大小：100%；
填充：0；
保证金：0；
背景图片：url（//images.visitcanberra.com.au/images/canberra\u hero\u image.jpg）；
背景大小：100%；
过渡：5s内轻松过渡；
高度：500px；
宽度：100%；
}

试试看

请参见
中的示例，您只需：

html, body {
    background: url("http://placehold.it/200x200") top center no-repeat;
    animation: animateBg forwards 2s ease-in;
}
@keyframes animateBg{
    from { background-size: 200px; }
    to { background-size: 100%; }
}

注意：图像只是一个占位符，您可以更改它以及animateBg关键帧动画（以及您需要的任何其他内容）的背景大小属性。以防你不知道

请务必花一点时间阅读，在jQuery和CSS之间进行选择时，能够首先利用CSS非常方便

如果这对您有效，请告诉我，否则我们可以制定更适合您的改进答案：）

希望这能解决您的疑问

只是一个简单的
jquery
动画播放

$("body").animate({
    "background-size" : "180px"
},2000);

在现场演示中试试这个
这里是代码的Jquery函数。带延迟和回调

$(document).ready(function () {
    $('body').animate({ backgroundSize: '135%'
    }, 2000, 'linear', function () {
        console.log("called");
    });

      });

因为我想在页面加载后慢慢放大。这就是为什么要使用转换。如果我直接在css中使用它，它将在页面加载时提供缩放图像，这不是我想要的。实际上，动画正在发生，当我检查元素时，我可以看到背景大小缓慢变化，但它只是在最终完成时才反映出来。似乎我必须添加“线性”作为参数，因为默认值为swing。但是它给出了一个错误
uncaughttypeerror:n.easing[this.easing]不是一个函数
使用关键帧利用CSS要容易得多，但在你看来，他应该使用“forward”而不是线性。你写错了代码。朋友，你的代码应该是这样的“背景大小”：“140px”。你给出的链接没有任何意义。请记下来……好的。。。。。。。。。。。。。。。你想推广你的网站吗？…或者你在live server上的项目给我一个我会检查的方法，我可以继续这个动画，或者在动画完成后重新启动动画？您可以通过使用不同的动画填充属性（如“linear”）替换“forwards”来重新启动动画。您刚刚发现有一种称为
动画迭代计数：infinite
。我们可以使用此属性永远重复动画。这是真的，这取决于您希望如何处理它，因为您可以使用更多动画属性并根据需要排列它们JSFIDLE的链接不起作用。。。请确保你的链接正常工作，否则不要在这里放置任何链接。好的
$("body").animate({
    "background-size" : "180px"
},2000);

$(document).ready(function () {
    $('body').animate({ backgroundSize: '135%'
    }, 2000, 'linear', function () {
        console.log("called");
    });

      });