jquery - 动画背景大小宽度或高度

Question

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

例如，如果我想改变宽度，像下面这样的工作吗？

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

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

Answer 1

我对财产有疑问backgroundSizeW，对我来说似乎有点无效：

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

Answer 2

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

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

如果您希望“宽度”是“变量”，则可以将宽度设置为固定值；只需：

var wid=60;
wid-=20;

Answer 3

该.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>

Answer 4

您可以使用动画（）背景宽度高度background-size

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