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

Question

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

Obs: I'm using jQuery 3.3.1 compressed

这是我尝试过的两种方式：

//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>

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

2 parameters in backgroundSize of animate in jQuery don't work?

javascript

jquery

jquery-animate