Javascript 使用jQuery轻松切换Div

我试图在切换div时建立一个平滑的转换。现在切换是立即的

$（文档）.ready（函数（）{
$（“.product suggestion form container”）。单击（函数（）{
$（“.form div top”）.toggle（）；
})
});
.description容器{
字体系列：“Proxima Nova常规”；
}
.表格分区{
利润率：10px0；
}
.产品建议表格{
边框：1px实心#C6；
边框底部：无；
填充物：5px10px；
显示器：flex；
证明内容：之间的空间；
背景色：#f8f7f7；
光标：指针；
}
/*初始显示*/
.表格分区顶部{
显示：无；
背景色：#f8f7f7；
边框：1px实心#C6；
}

请填写以下产品建议和联系我们表格：
产品建议表
jQuery的方法接受以毫秒为单位的持续时间作为第一个参数

$(".form-div-top").toggle(300);


$（文档）.ready（函数（）{
$（“.product suggestion form container”）。单击（函数（）{
$（“.form div top”）.toggle（300）；
})
});
.description容器{
字体系列：“Proxima Nova常规”；
}
.表格分区{
利润率：10px0；
}
.产品建议表格{
边框：1px实心#C6；
边框底部：无；
填充物：5px10px；
显示器：flex；
证明内容：之间的空间；
背景色：#f8f7f7；
光标：指针；
}
/*初始显示*/
.表格分区顶部{
显示：无；
背景色：#f8f7f7；
边框：1px实心#C6；
}

请填写以下产品建议和联系我们表格：
产品建议表
我可以自己使用
toggleClass（）
方法提出解决方案：

...
$(".form-div-top").toggleClass("form-div-top_show");
...

有必要为块活动创建一个附加类：

.form-div-top_show {
  opacity: 1;
}

此外，您还需要为块的平滑外观添加
过渡
规则，并将
显示：无
替换为
不透明度：0
：

.form-div-top {
  opacity: 0;
  background-color: #f8f7f7;
  border: 1px solid #c6c6c6;
  transition: .5s;
}


$（文档）.ready（函数（）{
$（“.product suggestion form container”）。单击（函数（）{
$（“.form div top”）.toggleClass（“form-div-top_show”）；
})
});
.description容器{
字体系列：“Proxima Nova常规”；
}
.表格分区{
利润率：10px0；
}
.产品建议表格{
边框：1px实心#C6；
边框底部：无；
填充物：5px10px；
显示器：flex；
证明内容：之间的空间；
背景色：#f8f7f7；
光标：指针；
}
/*初始显示*/
.表格分区顶部{
不透明度：0；
背景色：#f8f7f7；
边框：1px实心#C6；
过渡：.5s；
}
.form-div-top_秀{
不透明度：1；
}

请填写以下产品建议和联系我们表格：
产品建议表
尝试使用
slideToggle（）
来获得slidein和slideout效果，并摆脱动画和切换。同时使用这些功能是不正确的，只需单独使用
fadeIn（）
。调用
toggle（）
，也会阻止动画，也许您会喜欢。。。类似于
$（“.form div top”）.fadeToggle（800）其中800为毫秒延迟。默认值为400。；）@charlietfl Perfecture你可以检查一下，他使用了toggleClass（）