Javascript 为什么我的jQuery效果不像它的状态那样运行？

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

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

我理解，.hide（）或.slideUp（）函数只是隐藏div框，而不是删除它们。然而，在我的代码中，为什么在div.hide（）之后其他div框的位置会发生变化？它不应该保持在原来的位置，因为DIV-box仍然在那里，只是隐藏起来了吗

当一个DIV box被隐藏时，我如何让其他DIV保持在原始位置

$（文档）.ready（函数（）{
$（“#panel1”）.slideUp（1000）。delay（1500）。slideDown（1000）；
});
.panel{
显示：内联块；
宽度：80px；
高度：60px；
边框：1px纯绿色；
位置：相对位置；
顶部：20px；
左边距：45像素；
边界半径：5px；
}
.panelTop{
高度：30px；
背景颜色：蓝色；
颜色：白色；
文本对齐：居中；
}

#小组1
内容
#小组2
内容
#小组3
内容
#小组4
内容
您应该在
.panels
上使用
display:flex
，以解决您的第一个问题

对于第二个问题，您应该使用
可见性
或
不透明度


对于当前代码，您正在删除它，尽管它被称为
hide（）
它相当于CSS
display:none不保留元素的空间

尽管在您的情况下实际上不需要设置
可见性
，因为向上滑动它将隐藏元素并向下显示

大概是这样的：

$('#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;
}

并从
面板中
移除
顶部：20px

完整示例如下
您应该在
.panels
上使用
显示：flex
，以解决您的第一个问题

对于第二个问题，您应该使用
可见性
或
不透明度


使用当前代码，您将删除它，尽管它被称为
hide（）
它等同于CSS
display:none不保留元素的空间

尽管在您的情况下实际上不需要设置
可见性
，因为向上滑动它将隐藏元素并向下显示

大概是这样的：

$('#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;
}

并从
面板中
移除
顶部：20px

第一个问题的完整示例如下



为什么我的jQuery代码没有应有的动画效果？对于
例如，.slideUp（）和.slideDown（），我的代码显示了一些奇怪的东西
而不是幻灯片动画



.slideUp（）
方法设置匹配元素高度的动画。表示它设置高度动画，使其达到0（或者，如果设置，则设置为CSS最小高度属性的任何值）。请参阅以供参考。这正是发生在你的第一个盒子上的事情——它的高度在下降

之后，
display
style属性设置为
none
，以确保元素不再影响页面布局

显示无的功能是什么？



display:none
表示有问题的标签将不会出现在屏幕上
页面全部



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


我明白，.hide（）或.slideUp（）函数只是用来隐藏
div框，不删除它们，但是，在我的代码中，为什么
其他div框在div.hide（）之后更改？它不应该停留在家里吗
他们原来的位置，比如DIV-box还在那里，只是隐藏起来了






我怎样才能让其他部门保持原来的位置，
当一个DIV box被隐藏时



.hide（）
和
.slideUp（）
函数都将
display:none
添加到标记中表示他们现在已经走了

现在，你能做些什么让他们留在那里，但不让他们看到？

您可以使用
可见性
或
不透明度
属性，而不是使用
显示
财产

例如：
可见性：隐藏只会在视图中隐藏它

将更新您的小提琴，以便在一段时间内演示。希望这对你有帮助。如果不清楚，请随时询问。多谢各位


$（文档）.ready（函数（）{
setInterval（函数（）{
$（#panel1'）.slideUp（1000）.delay（500）.slideDown（1000）；
}, 3000);
});
.outer div
{
位置：相对位置；
显示：内联块；
最小高度：1px；
右边距：15px；
左边距：15px；
宽度：130px；
高度：90px；
}
.小组{
边框：1px纯绿色；
左边距：45像素；
边界半径：5px；
位置：绝对位置；
排名：0；
宽度：100%；
}
.panelTop{
高度：30px；
背景颜色：蓝色；
颜色：白色；
文本对齐：居中；
}

#小组1
内容
#小组2
内容
#小组3
内容
#小组4
内容
关于你的第一个问题



为什么我的jQuery代码没有应有的动画效果？对于
例如，.slideUp（）和.slideDown（），我的代码显示了一些奇怪的东西
而不是幻灯片动画



.slideUp（）
方法设置匹配元素高度的动画。表示它设置高度动画，使其达到0（或者，如果设置，则设置为CSS最小高度属性的任何值）。请参阅以供参考。这正是发生在你的第一个盒子上的事情——它的高度在下降

之后，
display
style属性设置为
none
to