动画背景大小宽度或高度答案

【问题标题】：Animate background-size width or height动画背景大小宽度或高度
【发布时间】：2016-01-18 07:34:01
【问题描述】：

如果我要更改宽度或高度，但不能同时更改两者，如何在 div 的背景大小上使用 JQuery 的 animate()。

例如，如果我想更改宽度，是否可以执行以下操作？

$("#buttonPic").animate({
    backgroundSizeW: "-=20px",
});

我在 SO 上找不到与此类似的问题

【问题讨论】：

你能做这个吗？

标签： jquery jquery-animate background-size

【解决方案1】：

我对@987654321@ 属性有疑问，对我来说似乎有点无效：

$("#buttonPic").animate({
    backgroundSize: "-=20px auto"  // <-----it should work
});

【讨论】：

是的，它确实有效，但我想知道我是否只能改变宽度而不是宽度和高度。 background-position 可以实现与此类似的事情，可以使用 animate 进行 backgroundPositionX 并且它可以工作
@Bolboa 为什么不明确设置auto。

【解决方案2】：

.animate()函数可以如下使用

$( "#go" ).click(function() {
  $( "#block" ).animate({
    width: "200px",
    }, 1500 );
});

div {
    background-color: #bca;
    width: 100px;
    border: 1px solid green;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="go">&raquo; Run</button>
<div id="block">Hello!</div>

【讨论】：

这不起作用，我只想更改我的 div 的背景图像的宽度，而不是 div 本身...目前 div 的背景大小设置为 60px 60px

【解决方案3】：

你可以animate()背景宽度高度与background-size

$( "#buttonPic" ).click(function() {
  $( "#divBlock" ).animate({
    "background-size": "-=20px",
    }, 1500 );
});

【讨论】：

我没有投反对票，但这只有在我想改变background-size的宽度和高度时才有效，目前它设置为background-size: 60px 60px，我只想改变其中一个属性，而不是两者
你也可以写html吗？你应该检查w3schools.com/cssref/css3_pr_background-size.asp
我不明白为什么它是必要的，但在这里...<button id="buttonPic">Add a photo</button>
background-size 可以与width 和height 一起使用，如果你同时使用的话。使用 jquery 获取一个并设置两者。
你应该检查这个stackoverflow.com/questions/5106243/…

【解决方案4】：

也许，你可以换个思路，例如：

$("#buttonPic").animate({
    backgroundSize: "40px 60px",
});

如果你想让'width'是一个'variable'，你可以设置一个宽度来代替固定值；只是：

var wid=60;
wid-=20;

【讨论】：