Why the animate function hides the other div at the end of animation?
<p>Code can be found there <a href="http://codepen.io/kongakong/pen/wMQrBR" rel="nofollow noreferrer">http://codepen.io/kongakong/pen/wMQrBR</a></p>

<p><strong>Javascript</strong>:</p>

<pre><code>$(document).ready(function () {
  init();
});

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

    });
}
</code></pre>

<p><strong>css</strong>:</p>

<pre><code>.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;
}
</code></pre>

<p><strong>html</strong></p>

<pre><code>&lt;div class="contrainer"&gt;
  &lt;div&gt;
    &lt;input id='test' type='button' value="test"&gt;&lt;/input&gt;
  &lt;/div&gt;

  &lt;div class="row"&gt;
    &lt;div class="answer-new"&gt;Under

    &lt;/div&gt;
    &lt;div class="answer"&gt;Top
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="answer-new"&gt;Under1

    &lt;/div&gt;
    &lt;div class="answer"&gt;Top1
    &lt;/div&gt;
  &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>Here is a screenshot of the page before animation starts</p>

<p><a href="https://i.stack.imgur.com/xlkjH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xlkjH.png" alt="enter image description here"></a></p>

<p>When the button is clicked, the animation is executed as expected.  I expect div's of css class <code>answer-new</code> stay visible. However at the end all the div disappeared.</p>

<p>I tried to use '0' instead of 'hidden'. In this case, the text of div <code>answer</code> stays visible. Not completely hidden.</p>

<p>Why this behaviour?</p>