Question

我想要完成的是在调用jQuery $().hide()之后，在当前页面上隐藏孩子div然后在其位置显示新div的动画。

当我调用.hide()时，父div会调整大小，我不希望这样。

parent中有两个div，一个text填充的div，以及有问题的div，所以当我调用hide时，只保留纯文本div。我希望height保持不变，因为新内容的高度相同这就是我所拥有的：

<div class="adminContent"> //Wrapper div, this should not change in height of 668px
    <div class="adminTitle"> // Text only div, remains after .hide is called
        <a href="~/Admin/Index">Admin</a> > Manage Class Roster
    </div>
<div class="resetBody" id="manageClassBody1"> // Div that is being hidden/replaced
... // div contents
</div>

CSS

.adminContent {
    background: #F7F7F7;
    -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
    border-radius: 5px;
    min-height: 668px;
}

隐藏子div后，我应该如何使它的高度为静态？谢谢！

编辑：我想用动画来交换两个div，以便在两者之间切换。我查看了jQuery提供的replaceWith()，但我不确定如何根据我的需要使用它。

Answer 1

我建议使用JQuery的动画功能来完成你的任务。

我为您创建了一个示例JSBin。

示例：

＆＃13;

$(document).on("click", "#togglebtn", function() {
  var divs = $('.resetBody, .resetBody2');
  var hiddenDiv = divs.filter(":not(:visible)");
  var visibleDiv = divs.filter(":visible");

  visibleDiv.fadeToggle({
    complete: function() {
      hiddenDiv.fadeToggle();
    }
  });

});

＆＃13;

.adminContent {
  background-color: lightgreen;
  padding: 10px;
}
.resetBody {
  background-color: #880000
}
.resetBody2 {
  background-color: lightblue
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="adminContent">//Wrapper div, this should not change in height of 668px
  <div class="adminTitle">much text wow! much text wow! much text wow! much text wow! much text wow!
    <a href="~/Admin/Index">Admin</a> > Manage Class Roster
  </div>
  <div class="resetBody">Div 1
    <br/>Div 1
    <br/>Div 1
    <br/>Div 1
    <br/>Div 1
    <br/>Div 1
    <br/>
  </div>
  <div class="resetBody2" style="display:none">Div 2 is taller
    <br/>Div 2
    <br/>Div 2
    <br/>Div 2
    <br/>Div 2
    <br/>Div 2
    <br/>Div 2
    <br/>
  </div>
</div>
<div style="margin-top:10px;">

  <button id="togglebtn">Toggle</button>
</div>

＆＃13;

当子div调整大小时，防止父div调整大小

1 个答案: