Javascript 将css高度返回到自动，将宽度返回到在JQuery中不起作用的百分比

我设置了一个div，原始高度为auto，宽度为百分比（48%）

我已经允许用户单击扩展div。div的高度将从自动扩展到80%，宽度将从48%扩展到100%。展开已设置动画（

.animate

）

以下是代码，用于扩展：

var e_p="in"; // The default of the div is in.

$(".my_expand_button").click(function() { 

if (e_p == 'in'){
//the percentages i want the div to expand to...

var p_h= 0.8; 
var p_w= 1.0;

$(".box1").css("opacity","0");// i make the the other divs invisible

$('.box2').animate({

height:($(".wrapper").height()* p_h), // expand height

width:($(".wrapper").width()* p_w)},'fast'); //expand width

e_p = 'out'; //the div has just been expanded, so it will go back to normal size on the second user click.
}

现在，上面的工作很好。一切都会像预期的那样膨胀

以下是将其恢复到正常大小的问题代码（在第二次用户单击时）

现在div回到200px，宽度看起来回到了48%，但是当我缩小页面时，宽度应该会扩大（占页面的48%），但它不会

---

高度不会返回自动，因为它不会随内容（文本）展开。文本只是在div和包装上移动（就像设置了绝对位置一样）。

问题在于，在动画运行时，您将高度设置为“自动”

动画完成后，需要将高度设置为“自动”（使用回调）

关于宽度，问题是当您使用width（）方法设置宽度时，jQuery将宽度设置为当时计算的绝对值（而不是显式的48%值）。要解决这个问题，只需在动画完成后用48%显式调用css即可。 以下是解决这两个问题所需的：

$('.box2').animate({
    height:200, // make height 200px for the moment
    width:($(".wrapper").width()* p_w)},'fast', function() {
      $(".box2").css({height : "auto", width : '48%'});
});

---

也可以一直将宽度设置为百分比，这样就不需要回调（仅用于宽度）。尝试将动画调用设置为do

“width”：p_w*100+'%'

太棒了，这就成功了。我只使用了宽度：“48%”；效果很好。谢谢你，不，对不起。我写得不够清楚。我在css编辑中使用了48%的宽度，所以：$（“.box2”）.css（高度：“自动”，宽度：“48%”）；。不，那不行。我以前也试过几次。

$('.box2').animate({
    height:200, // make height 200px for the moment
    width:($(".wrapper").width()* p_w)},'fast', function() {
      $(".box2").css({height : "auto", width : '48%'});
});