jquery - 背景图片缩小效果

Question

我想实现网站加载时背景“放大”的效果。文档准备好后，背景图像应逐渐缩小。

我决定为我的背景使用绝对定位元素:

HTML:

<div class="intro">
  <div class="intro_bg"></div>
</div>

CSS:

.intro {
   width: 100vh; height: 95vh;
}

.intro_bg {
    width: 140%;
    height: 140%;

    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    background: url(../images/hills.jpg) no-repeat center center fixed;
    background-size: cover;
}

jQuery :

    $('.intro_bg').animate({
        'width': '100%',
        'height': '100%'
    },20000, function() { alert(); });

基本上，这是行不通的。它成功地缩放了 .intro_bg 但图像并没有像预期的那样缩小。图片本身不会缩放或移动(这可能是 cover 的重点)。

如果我的想法行不通，实现“背景缩小”效果的最佳解决方案是什么？

Answer 1

为什么不更改在超时时应用具有缩放转换的过渡类(以防止立即应用)？

这具有在功能 (JS) 和表示 (CSS) 之间保持关注点清晰分离的额外优势

Demo Fiddle

HTML

<div class="intro">
    <div class="intro_bg"></div>
</div>

CSS

.intro {
    width: 600px;
    height:600px;
    overflow:hidden;
}
.intro_bg {
    width: 100%;
    height: 100%;
    background: url(http://www.picturesnew.com/media/images/image-background.jpg);
    background-position:center center;
    background-size:cover;
    transform:scale(1);
    transition:all 4s ease-in;
}
.intro_bg.zout {
    transform:scale(6); /* <--- change the scale of zoom out as appropriate */
}

Jq

setTimeout(function(){
    $('.intro_bg').addClass('zout');
},1000);