为什么我的jQuery效果不能像状态那样执行？

Question

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

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

2. 我知道，.hide（）或.slideUp（）函数仅用于隐藏div框，而不是删除它们，但是，在我的代码中，为什么其他div框的位置在DIV .hide（）之后发生了变化？ 当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

对于第一个问题

• 为什么我的jQuery代码没有应有的动画效果？ 例如.slideUp（）和.slideDown（），我的代码显示的是奇怪的东西，而不是slideUp动画。

.slideUp()方法可对匹配元素的高度进行动画处理。 意味着它会设置动画高度，使其达到0 （或设置为CSS min-height属性的任意值）。 请参阅此处以供参考。 这恰好是您的第一个盒子的高度正在减小。

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

什么显示都不显示？

• display:none表示该标签根本不会出现在页面上

现在第二个和第三个问题

• 我知道，.hide（）或.slideUp（）函数仅用于隐藏div框，而不是删除它们，但是，在我的代码中，为什么其他div框的位置在DIV .hide（）之后发生了变化？ 当DIV盒还在时，它是否应该保持在原始位置？

---

• 隐藏一个DIV框后，如何使其他DIV保持在原始位置？

.slideUp() .hide()和.slideUp()函数都将display:none添加到标签元素中。 意味着他们现在不见了

现在您该怎么做才能让他们呆在那里，但看不见？

您可以使用visibility或opacity属性代替使用display属性。

例如： visibility: hidden; 只会从视图中隐藏它。

将在一段时间内更新您的小提琴以进行演示。 希望这会帮助你。 请随时询问是否不清楚。 谢谢。

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

您应该在.panels上使用display:flex ，它可以解决您的第一个问题。

对于第二个问题，您应该使用visibility或opacity 。
使用当前代码，您将其删除，尽管它被称为hide() ，但它等效于CSS display:none; 不会保留元素的空间。

尽管实际上不需要设置visibility ，因为向上滑动将隐藏元素并向下显示。

像这样：

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

另外，您还需要更改CSS。
将此添加到您的CSS：

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

然后从.panel移除top: 20px;

完整的示例在这里https://jsfiddle.net/_jakob/cphptby3/1/