Why my jQuery effect not performing like it state?

Question

I have 3 questions about my jQuery study today.

1. Why my jQuery code not have the animation effect as it should be? for example, .slideUp() and .slideDown(), my code shows something strange instead of slideUp animation.

2. I understand, the .hide() or .slideUp() function is only to HIDE the div box, not DELETE them, however, in my code, why the position of other div boxes changed after a DIV .hide()? Shouldn't it stay at their original position as the DIV box is still there, just HIDED?

3. How can I achieve to let other DIVs stay at the original position, when one DIV box has been hided?

$(document).ready(function() {
  $('#panel1').slideUp(1000).delay(1500).slideDown(1000);
});

.panel {
  display: inline-block;
  width: 80px;
  height: 60px;
  border: 1px solid green;
  position: relative;
  top: 20px;
  margin-left: 45px;
  border-radius: 5px;
}
.panelTop {
  height: 30px;
  background-color: blue;
  color: white;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="panels">
  
  <div id="panel1" class="panel">
    <div class="panelTop">#panel1</div>
    <div class="panelBottom">content</div>
  </div>

  <div id="panel2" class="panel">
    <div class="panelTop">#panel2</div>
    <div class="panelBottom">content</div>
  </div>

  <div id="panel3" class="panel">
    <div class="panelTop">#panel3</div>
    <div class="panelBottom">content</div>
  </div>

  <div id="panel4" class="panel">
    <div class="panelTop">#panel4</div>
    <div class="panelBottom">content</div>
  </div>

</div>

Answer 1

For your first question

• Why my jQuery code not have the animation effect as it should be? for example, .slideUp() and .slideDown(), my code shows something strange instead of slideUp animation.

The .slideUp() method animates the height of the matched elements. Means it animates height so it reaches 0 (or, if set, to whatever the CSS min-height property is). See here for reference. That is exactly what is happening to your first box it is decreasing in height.

Afterwards the display style property is set to none to ensure that the element no longer affects the layout of the page.

What display none does ?

• display:none means that the tag in question will not appear on the page at all

Now for second and third question

• I understand, the .hide() or .slideUp() function is only to HIDE the div box, not DELETE them, however, in my code, why the position of other div boxes changed after a DIV .hide()? Shouldn't it stay at their original position as the DIV box is still there, just HIDED?

---

• How can I achieve to let other DIVs stay at the original position, when one DIV box has been hided?

The .hide() and .slideUp()function they both add display:none to your tag element. Means they are gone now

Now what can you do to let them stay there, But hidden from view ?

You can use visibility or opacity property instead rather than using display property.

For example: visibility: hidden; will just hide it from the view.

Will update your fiddle in order to demonstrate it in a while. Hope this will help you. Please feel free to ask if not clear. Thank you.

$(document).ready(function() {

  setInterval(function(){ 

    $('#panel1').slideUp(1000).delay(500).slideDown(1000);

  }, 3000);
  
});

.outer-div
{
    position: relative;
    display: inline-block;
    min-height: 1px;
    margin-right: 15px;
    margin-left: 15px;
    width: 130px;
    height: 90px;
}
.panel {
  border: 1px solid green;
  margin-left: 45px;
  border-radius: 5px;
  position:absolute;
  top:0;
  width: 100%;
}
.panelTop {
  height: 30px;
  background-color: blue;
  color: white;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


<div class="panels">
<div class="outer-div">
  <div id="panel1" class="panel">
    <div class="panelTop">#panel1</div>
    <div class="panelBottom">content</div>
  </div>
</div>
<div class="outer-div">
  <div id="panel2" class="panel">
    <div class="panelTop">#panel2</div>
    <div class="panelBottom">content</div>
  </div>
</div>
<div class="outer-div">
  <div id="panel3" class="panel">
    <div class="panelTop">#panel3</div>
    <div class="panelBottom">content</div>
  </div>
</div>
<div class="outer-div">
  <div id="panel4" class="panel">
    <div class="panelTop">#panel4</div>
    <div class="panelBottom">content</div>
  </div>
</div>
</div>

Answer 2

You should use display:flex on .panels, that solves your first question.

For second question you should use visibility or opacity.
With current code you are removing it, although it is called hide() it is equivalent to CSS display:none; which doesn't keep space of element.

Although you actually don't need to set visibility in your case because sliding it up will hide element and down show.

Something like this:

$('#panel1').animate({
  top: -62 // 60 is height of element plus 2px of borders
}, 1000).delay(1500).animate({
  top: 0
}, 1000);

Also you have to change CSS a bit.
Add this to your CSS:

.panels {
  display: flex;
  overflow: hidden;
  margin-top: 20px;
}

And from .panel remove top: 20px;

Full example is here https://jsfiddle.net/_jakob/cphptby3/1/