Javascript 如何使用FadeIn/FadeOut设置此显示/隐藏（并简化）？

我正试图建立一个网站，我想这样做。我想显示三个图像，同时向下滚动页面，在每个图像后面添加一个“链接”，以显示每个图像后面显示的更多内容。我需要该内容以淡入方式显示，当我再次单击时，它需要淡出并取消显示（display:none；）。我成功地完成了淡入部分，但没有淡出部分。它消失了，没有褪色的效果。此外，一次只能打开一个div。以下是迄今为止的代码：

$（'.expand、.card\uu btn-close'）。单击（函数（）{
$（'.toggleText'）.removeClass（'fadeOut'），
$（'.toggleText'）.toggleClass（'fadeIn'），
$（'.toggleText--two'）.removeClass（'fadeIn'），
$（'.toggleText--two'）.toggleClass（'fadeOut'）；
$（'.toggleText--three'）.removeClass（'fadeIn'），
$（'.toggleText--three'）.toggleClass（'fadeOut'）；
}); 
$（'.expand--two、.card__btn-close--two'）。单击（函数（）{
$（'.toggleText'）.removeClass（'fadeIn'），
$（'.toggleText'）.toggleClass（'fadeOut'），
$（'.toggleText--two'）.removeClass（'fadeOut'），
$（'.toggleText--two'）.toggleClass（'fadeIn'）；
$（'.toggleText--three'）.removeClass（'fadeIn'），
$（'.toggleText--three'）.toggleClass（'fadeOut'）；
}); 
$（'.expand--three、.card_ubtn-close--three'）。单击（函数（）{
$（'.toggleText'）.removeClass（'fadeIn'），
$（'.toggleText'）.toggleClass（'fadeOut'），
$（'.toggleText--two'）.removeClass（'fadeIn'），
$（'.toggleText--two'）.toggleClass（'fadeOut'）；
$（'.toggleText--three'）.removeClass（'fadeOut'），
$（'.toggleText--three'）.toggleClass（'fadeIn'）；
}); 
.img{宽度：300px；高度：50px；}
.toggleText.fadeIn、.toggleText--2.fadeIn、.toggleText--3.fadeIn{
-moz动画名称：fadeIn；
-webkit动画名称：fadeIn；
-ms动画名称：fadeIn；
动画名称：fadeIn；
-moz动画持续时间：.5s；
-webkit动画持续时间：.5s；
-ms动画持续时间：.5s；
动画持续时间：.5s；
-moz动画计时功能：轻松输入输出；
-webkit动画计时功能：轻松输入输出；
-ms动画计时功能：轻松输入输出；
动画计时功能：轻松进出；
-moz动画填充模式：正向；
-webkit动画填充模式：正向；
-ms动画填充模式：正向；
动画填充模式：正向；
显示：块；
}
.toggleText、.toggleText--2、.toggleText--3、.toggleText.fadeOut、.toggleText--2.fadeOut、.toggleText--3.fadeOut{
-moz动画名称：淡出；
-webkit动画名称：淡出；
-ms动画名称：淡出；
动画名称：淡出；
-moz动画持续时间：.5s；
-webkit动画持续时间：.5s；
-ms动画持续时间：.5s；
动画持续时间：.5s；
显示：无；
}
@-moz关键帧fadeIn{0%{opacity:0；display:none；}100%{opacity:1；display:block；}
@-webkit关键帧fadeIn{0%{opacity:0；display:none；}100%{opacity:1；display:block；}
@-ms关键帧fadeIn{0%{opacity:0；显示：无；}100%{opacity:1；显示：块；}
@-关键帧fadeIn{0%{opacity:0；display:none；}100%{opacity:1；display:block；}
@-moz关键帧淡出{0%{opacity:1；显示：块；}100%{opacity:0；显示：无；}
@-webkit关键帧淡出{0%{opacity:1；显示：块；}100%{opacity:0；显示：无；}
@-ms关键帧淡出{0%{opacity:1；显示：块；}100%{opacity:0；显示：无；}
@-关键帧淡出{0%{opacity:1；显示：块；}100%{opacity:0；显示：无；}}

额外内容1在这里！
前庭精英自由，调味品ac sapien quis，lobortis tincidunt eros。整数级的sapien odio。毛里斯前庭的Fusce，智者生命的consequat，eleifend orci。康格先生，自由拍卖人斯克利尔斯克先生，这句话的主旨是“不可否认的”，但这句话的主旨是“不可否认的”。我是尼布·乌尔纳（Etiam nibh urna），我是一位智者。在奥古斯都，你的智者是谁。这是一种很好的治疗方法。黄粉虱。通俗易懂，充满活力，充满活力，是一种令人振奋的精英前辈。这是一个完美的时刻。非梅托斯效率，智囊团，梅托斯。这是一个很好的例子。这是一个神圣的节日。不要在我的肺里发酵。同侧双盲法，同侧门法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法。库拉比图·费吉亚特，佩伦茨克港的奥迪奥，只是一个临时侵权人，一个自由的侵权人。
额外内容2在这里！
前庭精英自由，调味品ac sapien quis，lobortis tincidunt eros。整数级的sapien odio。毛里斯前庭的Fusce，智者生命的consequat，eleifend orci。康格先生，自由拍卖人斯克利尔斯克先生，这句话的主旨是“不可否认的”，但这句话的主旨是“不可否认的”。我是尼布·乌尔纳（Etiam nibh urna），我是一位智者。在奥古斯都，你的智者是谁。这是一种很好的治疗方法。黄粉虱。通俗易懂，充满活力，充满活力，是一种令人振奋的精英前辈。这是一个完美的时刻。非梅托斯效率，智囊团，梅托斯。这是一个很好的例子。这是一个神圣的节日。不要在我的肺里发酵。同侧双盲法，同侧门法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法氏法。帕伦茨克港的奥迪奥·费吉亚特牧师，一位自由的继承人，一位名叫托托·坦普尔·迪亚姆的侵权者