为什么动画功能在动画结束时隐藏另一个div？

安东尼·孔

可以在这里找到代码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”代替“ hidden”。在这种情况下，div的文本answer保持可见。没有完全隐藏。

为什么这样的行为？

糯米饭

这是因为您的.rowdiv具有，overflow-x: hidden;并且当.answerdiv宽度被隐藏时，除以外就没有任何div了.answer-new。

而.answer-new就是position:absolute这样，指望它不宽/高。并且它将隐藏所有元素溢出.row。

到。使它正常工作，并向其中添加填充，.row这样就计算出一些间距。

像她一样，我补充说padding: 25px 0;。而且我给绝对div最高的价值。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;
}

工作小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。