在jQuery中使用backgroundSize中的2个参数不起作用？

Question

我正在尝试创建一个动画来水平增加背景大小，当鼠标悬停在它上面时保持垂直自动。我试图在animate函数中传递backgroundSize中的2个参数，但这不起作用。

Obs：我正在使用jQuery 3.3.1压缩

这是我尝试的两种方式：

//First way
$('#myDiv').hover(
    function() {
        $(this).animate({
            backgroundSize: "auto 130%"
        }, 450);
        $(this).clearQueue();

    },
    function() {
        $(this).animate({
            backgroundSize: "auto 100%"
        }, 450);
        $(this).clearQueue();

});

// Second way
$('#myDiv').hover(
    function() {
        $(this).animate({
            backgroundSize: "auto +=30%"
        }, 450);
        $(this).clearQueue();

    },
    function() {
        $(this).animate({
            backgroundSize: "auto -=100%"
        }, 450);
        $(this).clearQueue();

});

我想知道是否有另一种方法可以做到这一点。

Answer 1

您可以使用css进行操作并在悬停时为背景大小设置动画，例如：

#kitties {
  display:block;
  width: 100px;
  height: 200px;
  background: url(http://placekitten.com/200/300) no-repeat center center;
  background-size: auto 100%;
  transition: background-size linear 450ms;
}
  
 #kitties:hover{
  transition: background-size linear 450ms;
  background-size: auto 130%; 
 }

<div id="kitties"></div>