Question

我有以下HTML标记：

<a class="home-page" href="http://google.com">  
    <section class="col left">
        <div class="opacity-overlay"></div>
        <div class="description">
            <img src="img/mobile-apps.png" alt="Mobile Application Design and Development"><br>
            <h1 class="homepage">
                Mobile Application <br>
                Design &amp; Development
            </h1>
            <p class="homepage">
                (iOS — Android — Windows)
            </p>
            <h1 class="view">View Projects</h1>
        </div>
    </section>
</a>

CSS：

section.col {
    width:33%;
    height: 100%;
    display: inline-block;
    float: left;
    text-align: center;
    position: relative;
    display: table;
}
section.left {
    background: url(../img/left-col-bg.jpg) no-repeat center center ; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

当section位于:hover时，我需要为背景图像设置ZOOM效果的动画。我试图使用CSS过渡但它动画我的整个内容，而不仅仅是背景图像。所以我决定尝试jQuery。这是我的代码：

$(document).ready(function() {
    $('.col').mouseenter(function(e) {
        $(this).animate({
            "background-size":"120%"
        }, 3000 );
    }).mouseleave(function(e) {
        $(this).animate({
            "background-size":"100%"
        }, 3000 );
    });
});

这并没有真正起作用，因为它开始动画就像我的背景是0％所以它不会从cover状态放大但实际上使它消失然后缩放到120％。有什么想法吗？

这是一个jsfiddle示例

Answer 1

他们是仅限CSS的解决方案

section.left {
    background: url(https://dl.dropboxusercontent.com/u/72385383/left-col-bg.jpg) no-repeat center center;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
section.left:hover {
    -webkit-background-size: 120%;
    -moz-background-size: 120%;
    -o-background-size: 120%;
    background-size: 120%;}

工作Fiddle

编辑 jQuery解决方案

  $(document).ready(function() {
        $(".col").css({"background-size":"100%"})
        $('.col').mouseenter(function(e) {
            $(this).animate({
                "background-size":"120%"
            }, 3000 );
        }).mouseleave(function(e) {
            $(this).animate({
                "background-size":"100%"
            }, 3000 );
        });
    });

工作Fiddle

jQuery动画background-size属性

1 个答案: