Question

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

糟糕：我使用的是jQuery 3.3.1压缩版

这是我尝试的2种方法：

//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做到这一点，并在悬停时设置背景大小的动画，例如：

x = ['a', 'b', 'c', '', 'd']

['hello' if s=='' else s for s in x]

['a', 'b', 'c', 'hello', 'd']

#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%; 
 }

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

1 个答案: