jQuery集`background-size'不起作用

Question

我有以下问题：

---

单击时，我正在尝试为绝对定位的Div的位置，宽度和高度进行动画。另外，我试图通过jQuery更改background-size。

发生的事情是它正确更改了所有CSS属性，而不是background-size。它应该将background-size:100% auto更改为background-size:auto 100%。它似乎忽略了。

有人知道为什么会发生这个问题吗？

$(".item").click(function(){
  $(this).animate({
    'width': '94vw',
    'height': '94vh',
    'top': '3vh',
    'left': '3vw',
    'background-size': 'auto 100%'
  }, 500);
  
  $(".again").fadeIn();
});
$('.again').click(function() {
    location.reload();
});

*{
margin:0;
padding:0;
}
.item{
  background:#a0a0a0;
  width:50%;
  height:100px;
  position: absolute;
  top:0;
  left:0;
  cursor:pointer;
  overflow:hidden;
  background-image:url("http://www.stefan-hefele.de/tl_files/Portfolio/Landschaft/Mallorca/Hochformate/9542_Mallorca%20Dawn.jpg");
  background-size:100% auto;
  background-position:center;
  background-repeat:no-repeat;
}
.again{
display:none;
position:absolute;
bottom:20px;
width:100px;
left:calc(50% - 50px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item"></div>
<button class="again">Again</button>

Answer 1

为什么不使用CSS过渡与类混合而不是JQuery animate()？

在这里，我使用类.big来切换您的CSS规则。我还在您的.item上添加了transition: all .5s;以启用过渡。

$(".item").click(function() {
  $(this).toggleClass('big');
});

* {
  margin: 0;
  padding: 0;
}
.item {
  background: #a0a0a0;
  width: 50%;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  overflow: hidden;
  background-image: url("http://www.stefan-hefele.de/tl_files/Portfolio/Landschaft/Mallorca/Hochformate/9542_Mallorca%20Dawn.jpg");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  transition: all .5s;
}
.item.big {
  width: 94vw;
  height: 94vh;
  top: 3vh;
  left: 3vw;
  background-size: auto 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item"></div>