javascript - 为什么我的 jQuery 效果不像它所说的那样执行？

Question

我今天有 3 个关于我的 jQuery 学习的问题。

1. 为什么我的 jQuery 代码没有应有的动画效果？例如，.slideUp() 和 .slideDown()，我的代码显示了一些奇怪的东西而不是 slideUp 动画。

2. 我明白， .hide() 或 .slideUp() 功能只是为了隐藏 div 框，而不是删除它们，但是，在我的代码中，为什么其他 div 框的位置在 DIV 之后改变了。隐藏()？它不应该留在原来的位置，因为 DIV 框还在那里，只是隐藏了吗？

3. 如何实现隐藏一个DIV框后，让其他DIV留在原来的位置？

$(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

第一个问题

• 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.

.slideUp() 方法为匹配元素的高度设置动画。意味着它动画高度使其达到 0(或者，如果设置，则为 CSS min-height 属性的任何值)。参见 here以供引用。这正是您的第一个盒子正在发生的事情，它的高度正在降低。

之后 display 样式属性设置为 none 以确保该元素不再影响页面的布局。

display none 有什么作用？

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

现在回答第二个和第三个问题

• 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?

.hide() 和 .slideUp() 函数都将 display:none 添加到您的标签 元素。 表示他们现在不在了

现在您可以做些什么来让它们留在那里，但看不见？

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

例如:visibility: hidden; 只会将其从 View 中隐藏。

稍后将更新您的 fiddle 以进行演示。希望对你有帮助。如果不清楚，请随时询问。谢谢。

$(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>