在 jQuery 动画宽度期间缩小父级以适应子级答案

【问题标题】：Shrink parent to fit children during jQuery animate width在 jQuery 动画宽度期间缩小父级以适应子级
【发布时间】：2016-10-02 19:53:59
【问题描述】：

我有一个 relative 定位的父级，其中 absolute 定位的图像具有 width:100% 。

我使用 jquery 将父级的初始高度设置为等于图像纵横比。问题是页面中的另一个动画缩小了 div。 在收缩过程中我想让父母适合孩子的形象。

如何在动画过程中保持父级的纵横比？（也许像窗口调整大小监听器之类的东西？）请注意，这个收缩是一个示例动画。我有一个复杂的真实动画，所以我一直在寻找一个通用的解决方案，而不是这个示例目标 200px 宽度。

$(document).ready(function(){
	var width=$("#wrapper").width();
	$("#wrapper").height(width*0.33);
  
  
  $("#shrink").click(function(){
    $("#wrapper").animate({"width":"200px"},3000)
  })
})

#wrapper{
  position:relative;
  top:0;
  left:0;
  width:100%;
  border:1px solid #444444;
}

.child{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  }

#shrink{cursor:pointer}

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

<a id="shrink">Click here to shrink</a>
<br><br>
<div id="wrapper">
  <img class="child" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>

【问题讨论】：

标签： jquery html css

【解决方案1】：

您可以使用一个变量来存储width 的缩放因子（即newWidth / width），然后将height 乘以该因子得到新的height。

$(document).ready(function() {
  var width = $("#wrapper").width();
  $("#wrapper").height(width * 0.33);

  var newWidth = 200;
  var scalingFactor = newWidth / width;
  var height = $("#wrapper").height();

  $("#shrink").click(function() {
    $("#wrapper").animate({
      "width": newWidth + "px",
      "height" : height * scalingFactor + "px"
    }, 3000)
  })
})

#wrapper {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid #444444;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
#shrink {
  cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="shrink">Click here to shrink</a>
<br>
<br>
<div id="wrapper">
  <img class="child" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>

【讨论】：

谢谢。您的答案仅适用于我对最终宽度一无所知的确切目标宽度。这个缩小按钮是一个示例，我有一个复杂的动画，不知道动画期间的宽度。我赞成您的回答，但我必须等待更多的通用解决方案。
不客气！我只是试图用你的代码中的 sn-p 来解决这个问题。如果您对最终宽度一无所知，那就另当别论了。你能发布你的完整代码吗？还是它的缩小版？！
再次感谢。我很抱歉这个问题不够清楚。我找到了一个通用解决方案并将其作为新答案发布。

【解决方案2】：

好的。我找到了使用 jQuery step 函数的通用解决方案。 step 是 jQuery animate 中的一个选项，在动画的每一步都会触发。所以我可以编写一个调整大小的函数并在每一步调用它。

$(document).ready(function(){
	resizeWrapper();
  
  
  $("#shrink").click(function(){
    $("#wrapper").animate({"width":"200px"},{duration:3000,step:function(){resizeWrapper()}})
  })
})

function resizeWrapper(){
	var width=$("#wrapper").width();
	$("#wrapper").height(width*0.33);

}

#wrapper{
  position:relative;
  top:0;
  left:0;
  width:100%;
  border:1px solid #444444;
}

.child{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  }

#shrink{cursor:pointer}

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

<a id="shrink">Click here to shrink</a>
<br><br>
<div id="wrapper">
  <img class="child" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>

我也找到了detect resize，但它对我不起作用。

【讨论】：