Jquery 恢复未设置的div宽度

我正在尝试设置一个div的动画，当我“缩小”它时，我将其设置为

width

到

650px

，当我切换动画时，我想恢复它的本机

width

。如您所见，My

animated_div

具有容器的

width

，并且仅设置了

min width

。这是我的代码：

HTML

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

JQUERY

$("#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的宽度比容器的宽度大。

您只需通过jQuery将宽度设置为“auto”。您的电话如下所示：

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

---

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

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

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

---

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

我相信您要找的是设置

宽度：auto

。你有一个JSFIDLE来显示这个问题吗？我已经试过使用auto，但它不起作用。我们需要看到一些更完整的CSS，因为auto应该让浏览器根据它的显示方式来渲染宽度。如果它是绝对定位的，它应该包装以填充内容。如果是静态的，则应填充容器的宽度等。

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