jquery - 恢复未设置的 div 宽度

Question

我正在尝试为 div 设置动画，我将它设置width为650px当我“缩小”它时，我想width在切换动画时恢复它的原生状态。我animated_div的如你所见，有width容器的，而且只有min-width一套。这是我的代码：

HTML

<div id="container> 
<div class="animated_div>
... 
<p>really a lot of text here</p>
...
</div>
</div>

CSS

.animated_div{
 padding:20px;
 min-width:650px;
 margin:0 auto;
 margin-bottom:15px;
 margin-top:10px;
 }

查询

$("#toggle_click").on('click', function() {
  $("#animated_div").animate({
  width : "650px"
 })

$("#toggle_click2").on('click', function() {
  $("#animated_div").animate({
  width : "100%"   // Here it is the problem , It set the div to be over-widthed.
 })

正如我在评论中所写的那样，问题是如果我设置100%div 获得比容器更大的宽度。

Answer 1

You can simply set the width to "auto" via jQuery. Your call would look like this:

$("#toggle_click2").on('click', function(){
    $('#animated_div').animate({ width:'auto'});
});

Answer 2

100% 宽度 + 你的 20px 填充将使你的 div 比你的容器宽 40px。

尝试，而不是将宽度设置为 100%，将宽度设置回继承：

$("#toggle_click2").on('click', function() {
    $("#animated_div").animate({
           width : "auto"
    });
});

另外，不要忘记右括号和分号。