动画背景大小宽度或高度

Question

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

例如，如果我想改变宽度，像下面这样的东西行得通吗？

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

我在 SO

上找不到与此类似的问题

Answer 1

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

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

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

Answer 3

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

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

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

var wid=60;
wid-=20;

Answer 4

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

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

动画背景大小宽度或高度

Animate background-size width or height

jquery

jquery-animate

background-size