Question

demo

body{
    background: url(path) no-repeat, url(path) no-repeat 50% 0%;
}

我想从多个背景图像集中设置背景大小的动画。但我不知道如何从多个图像中仅定位一个图像的背景大小。例如。在我的演示中，我想在单击按钮时更改第二个图像的背景大小。此外，背景大小应仅水平更改。

$('button').on('click',function(){
    $('body').animate({
        'background-size': '20%' // '20% 100%' won't work // '100% 20%' won't work.
    },5000); 
});

Answer 1

首先，对于按钮上的点击事件：

在html页面的末尾添加：

<script src="path-to-your-jquery-file"></script>

然后，添加：

<script>
    $('#your-button').click(function(){
        // Here you must change the css properties of your background
    });
</script>

现在，要仅更改背景的大小，您必须指明所有尺寸。例如，如果你有2个背景，你可能会有这样的东西：

background-size: cover, contain;

解决方案可能是：

<script>
    $('#your-button').click(function(){
        $('body').css('background-size', '100% 100%, 100% 0%');
    });
</script>

如果你想使用CSS过渡动画：

body {
    transition: 0.5s background ease;
}

CSS过渡：http://www.w3schools.com/css/css3_transitions.asp

如何仅水平动画背景大小？

1 个答案: