Javascript 无法设置textbox2向上移动的动画

我有一个带有2个

按钮

s和2个

textarea

s的表单。加载时，我只想显示

部分1

（按钮，文本区域）和

部分2

按钮。单击

section2

，我想隐藏

section1

文本区域，显示

section2

文本区域

，并逐渐将其移动到屏幕顶部，其中

section1

文本区域

处于上升状态。单击

section1

按钮，我想隐藏

section2

文本区域，并显示

section1

文本区域向下生长的过渡

到目前为止，我已经编写了以下代码。虽然我能够显示/隐藏这两个部分，但我无法创建动画


功能显示部分1Hideothers（事件）{
var target=event.target；
日志（“将显示问题”，目标）；
var elToShow=$（“第1节”）；
var elToHide=$（“第2节”）；
elToShow.addClass（“未压缩”）；
移除类（“塌陷”）；
elToHide.addClass（“崩溃”）；
elToHide.removeClass（“未折叠”）；
}
功能显示部分2隐藏其他人（事件）{
var target=event.target；
日志（“将显示问题”，目标）；
var elToShow=$（“第2节”）；
var elToHide=$（“第1节”）；
elToShow.addClass（“未压缩”）；
移除类（“塌陷”）；
elToHide.addClass（“崩溃”）；
elToHide.removeClass（“未折叠”）；
}
。已折叠{
显示：无；
动画名称：合同；
动画持续时间：4s；
}
.未压缩{
显示：块；
动画名称：展开；
动画持续时间：4s；
}
@关键帧展开{
0% {
显示：无；
身高：0%；
不透明度：1；
}
100% {
显示：块；
身高：100%；
不透明度：0；
}
}
@关键帧合同{
0% {
显示：块；
身高：100%；
不透明度：0；
}
100% {
显示：无；
身高：0%；
不透明度：1；
}
}

第一节
第一节
第2节
第二节
可以看出您正在使用jQuery，因此可以使用
slideDown（）
和
slideUp（）
方法

在此处阅读更多->您还可以向这些方法添加选项。比如持续时间，放松等等

我还对HTML/jQ代码做了一些更改

为按钮（
未选择的按钮
）使用一个公共类，并使用jquery选择它们，然后在它们上添加一个单击功能

将公共类添加到节中。我使用了
.section

然后，选择单击按钮后的部分（当单击Submit1时，将选择section1，第二次相同，或者即使您有更多按钮/部分），并用
slideUp（）显示该部分

然后选择所有未选中的部分（上一步选中的部分），并使用
slideDown（）隐藏它们。


var按钮=$（'.unselected按钮'）；//两个按钮
$（按钮）。在（'单击'，函数（）上）{
var elToShow=$（this.next（'.section'）；
var elToHide=$（'.section'）。not（elToShow）；
elToShow.slideDown（）
elToHide.slideUp（）
})
#第2节{
显示：无
}

第一节
第一节
第2节
第二节
可以看出您正在使用jQuery，因此可以使用
slideDown（）
和
slideUp（）
方法

在此处阅读更多->您还可以向这些方法添加选项。比如持续时间，放松等等

我还对HTML/jQ代码做了一些更改

为按钮（
未选择的按钮
）使用一个公共类，并使用jquery选择它们，然后在它们上添加一个单击功能

将公共类添加到节中。我使用了
.section

然后，选择单击按钮后的部分（当单击Submit1时，将选择section1，第二次相同，或者即使您有更多按钮/部分），并用
slideUp（）显示该部分

然后选择所有未选中的部分（上一步选中的部分），并使用
slideDown（）隐藏它们。


var按钮=$（'.unselected按钮'）；//两个按钮
$（按钮）。在（'单击'，函数（）上）{
var elToShow=$（this.next（'.section'）；
var elToHide=$（'.section'）。not（elToShow）；
elToShow.slideDown（）
elToHide.slideUp（）
})
#第2节{
显示：无
}

第一节
第一节
第2节
第二节
非常感谢。代码运行良好。我会阅读代码，如果我有问题，我可能会回来找你。@ManuChadha很高兴我能帮上忙。干杯完成评论-当我使用pure
.js
制作动画时，我做错了什么？没有。您使用的是js和jquery的组合来选择和添加/删除类。以及动画的css。JS/jquery是正确的（虽然可以变得更“优化”），但是CSS动画是不正确的（您需要使用动画填充模式和translate:scale），但是，如果您的项目中已经有jquery（尽管我不一定推荐），那么使用jquery提供的是一个好主意。非常感谢。代码运行良好。我会阅读代码，如果我有问题，我可能会回来找你。@ManuChadha很高兴我能帮上忙。干杯完成评论-当我使用pure
.js
制作动画时，我做错了什么？没有。您使用的是js和jquery的组合来选择和添加/删除类。以及动画的css。JS/jquery是正确的（虽然可以变得更“优化”），但是CSS动画是不正确的（您需要使用动画填充模式和translate:scale），但是，如果您的项目中已经有jquery（尽管我不一定推荐）