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

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的宽度将超过容器。

Answer 1

您可以通过jQuery将宽度设置为“auto”。你的电话会是这样的：

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

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

恢复未设置的div宽度

2 个答案: