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规则。我还在transition: all .5s;添加了.item以启用转换。

＆＃13;

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

＆＃13;

* {
  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%;
}

＆＃13;

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

＆＃13;

jQuery设置`background-size`不起作用

1 个答案: