css - 为什么 animate 函数在动画结束时隐藏了另一个 div？

Question

代码可以在那里找到 http://codepen.io/kongakong/pen/wMQrBR

Javascript:

$(document).ready(function () {
  init();
});

function init() {
  $('#test').on('click', function () {
        $('.answer').animate({width: "hide"}, 1000, 'swing');

    });
}

CSS:

.row {
  position: relative;
  overflow-x: hidden;
}

.hidden {
  display: none;
}


.answer {
  font-size: 40px;
  color: red;
  width:100%;

  opacity: 1;
  z-index: 100;
  border: 1px solid red;
  text-align: center;
  background-color: #fff;
}

.answer-new {
  font-size: 40px;
  /* to make answer-new on top and cover answer */
  position: absolute;
   border: 1px solid blue;
   width: 100%;
  z-index: 1;
  text-align: center;
}

html

<div class="contrainer">
  <div>
    <input id='test' type='button' value="test"></input>
  </div>

  <div class="row">
    <div class="answer-new">Under

    </div>
    <div class="answer">Top
    </div>
  </div>
  <div class="row">
    <div class="answer-new">Under1

    </div>
    <div class="answer">Top1
    </div>
  </div>

</div>

这是动画开始前的页面截图

单击按钮时，动画将按预期执行。我希望 div 的 css 类 answer-new 保持可见。然而最后所有的 div 都消失了。

我尝试使用“0”而不是“隐藏”。在这种情况下，div answer 的文本保持可见。没有完全隐藏。

为什么会出现这种行为？

Answer 1

这是因为你的 .row div 有 overflow-x: hidden; 而当 .answer div width 变成 hidden 那么就没有了.answer-new 以外的 div。

而 .answer-new 是 position:absolute 所以，它不计算宽度/高度。并且它会隐藏所有溢出 .row 的元素。

到。让它工作添加填充到 .row 所以，它计算一些间距。

就像她在示例中一样，我添加了 padding: 25px 0;。我给绝对股利最高的值(value)。 top: 0; 给出它的位置。

并添加了 margin: -25px 0; 到 .answer 以从顶部正确显示它作为添加到父 div 的填充。

CSS:

.row {
  position: relative;
  overflow-x: hidden;
   padding: 25px 0;
}

.hidden {
  display: none;
}

.answer {
  font-size: 40px;
  color: red;
  width:100%;

  opacity: 1;
  z-index: 100;
  border: 1px solid red;
  text-align: center;
  background-color: #fff;
  margin: -25px 0;
}

.answer-new {
  font-size: 40px;
  /* to make answer-new on top and cover answer */
  position: absolute;
   border: 1px solid blue;
   width: 100%;
  z-index: 1;
  text-align: center;
  top:0;
}

Working Fiddle