jQuery动画背景大小属性

jQuery animate background-size property

本文关键字：属性 背景 动画 jQuery      更新时间：2024-03-17

我有以下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示例

他们是一个仅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

EDITjQuery解决方案

  $(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

相关文章：