Анимация фона размером с ширину или высоту

Question

Как мне использовать JQuery's animate() на размер фона div, если я должен был изменить ширину или высоту, но не оба.

Например, если я хочу изменить ширину, будет ли что-то вроде следующей работы?

$("#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 );
});