Question

我有一个相对定位的父级，其中的绝对位置图像的宽度为100％。

我使用等于图像宽高比的jquery设置父级的初始高度。问题是页面中的另一个动画缩小了div。在收缩期间我想让父母适合儿童形象。

如何在动画期间保持父级的宽高比？（或许类似于窗口调整大小的监听器？）请注意，这种收缩是一个示例动画。我有一个真实的复杂动画，所以我在寻找一个通用的解决方案，不是为了这个样本目标200px宽度。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以使用变量来存储width的缩放系数（即newWidth / width），然后将height乘以此系数以获得新的height。

＆＃13;

$(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)
  })
})

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

$(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，但它对我不起作用。

在jQuery动画宽度期间收缩父级以适合孩子

2 个答案: