Javascript 使用jQuery重新启动已隐藏且透明的动画

我有一个CSS动画，可以同时从可见到隐藏，从实体到透明。我的问题是，这是一个我需要在点击按钮时显示的动画。当实际的隐藏和淡出是由CSS而不是jQuery执行时，如何在单击时触发事件？例如，单击Div'One'时，我希望覆盖播放一次。单击其他div时也是如此。我似乎无法解决这个问题，如果能帮上忙就好了

$（“.btn”）。单击（函数（）{
变量el=$（“.overlay”），
newone=el.clone（真）；
el.before（新一）；
$（“+el.attr（“class”）+“：last”）.remove（）；
});
.overlay{
位置：固定；
排名：0；
左：0；
身高：100%；
宽度：100%；
显示：表格；
背景色：rgb（3917496）；
z指数：10；
}
h1.thank-you-message{字体大小：12.0rem；显示：表格单元格；颜色：#fff；文本对齐：居中；
垂直对齐：中间；-webkit透视图：1000；-webkit字体平滑：抗锯齿；}
.谢谢{
-webkit动画持续时间：1s；
动画持续时间：1s；
-webkit动画填充模式：两者都有；
动画填充模式：两者都有；
-webkit动画计时功能：轻松输出；
动画计时功能：放松；
} 
@-webkit关键帧淡出缩放{
0%{可见性：可见；不透明度：1；变换：缩放（1）；/*CSS3*/
-moz变换：缩放（1）；/*Firefox*/
-webkit转换：缩放（1）；/*webkit*/
-o变换：缩放（1）；/*Opera*/
-ms变换：比例（1）；/*即9*/}
40%{不透明度：1；变换：变换：比例（0.75）；/*CSS3*/
-moz变换：缩放（0.75）；/*Firefox*/
-webkit变换：缩放（0.75）；/*webkit*/
-o变换：比例（0.75）；/*Opera*/
-ms变换：比例（0.75）；/*IE 9*/}
60%{不透明度：1；变换：变换：比例（0.75）；/*CSS3*/
-moz变换：缩放（0.75）；/*Firefox*/
-webkit变换：缩放（0.75）；/*webkit*/
-o变换：比例（0.75）；/*Opera*/
-ms变换：比例（0.75）；/*IE 9*/}
100%{可见性：隐藏；不透明度：0；
转换：-moz转换：缩放（0.5）；/*Firefox*/
-webkit变换：缩放（0.5）；/*webkit*/
-o变换：比例（0.5）；/*Opera*/
-ms变换：比例（0.5）；/*IE 9*/}
} 
@关键帧淡出比例{
0%{可见性：可见；不透明度：1；变换：比例（1）；}
40%{不透明度：1；变换：比例（0.75）；}
60%{不透明度：1；变换：比例（0.75）；}
100%{可见性：隐藏；不透明度：0；变换：比例（0.5）；}
} 
.fadeOutScale{
-webkit动画名称：fadeOutScale；
动画名称：淡出淡出；
}
.动画淡出{
-webkit动画持续时间：1s；
动画持续时间：1s；
-webkit动画填充模式：两者都有；
动画填充模式：两者都有；
-webkit动画计时功能：轻松输出；
动画计时功能：放松；
} 
@-webkit关键帧淡出{
0%{可见性：可见；不透明度：1；}
40%{不透明度：1；}
60%{不透明度：1；}
100%{可见性：隐藏；不透明度：0；}
} 
@关键帧淡出{
0%{可见性：可见；不透明度：1；}
40%{不透明度：1；}
60%{不透明度：1；}
100%{可见性：隐藏；不透明度：0；}
} 
.fadeOut{
-webkit动画名称：淡出；
动画名称：淡出；
}
谢谢
一
二
三个
函数runAnimation（）{
$（'.overlay'）.removeClass（'animated-fade-out-fadeOut'）；
$（'.overlay h1'）.removeClass（'fadeOutScale'）；
setTimeout（函数（）{
$（'.overlay'）.addClass（'animated-fade-out-fadeOut'）；
$（'.overlay h1'）.addClass（'fadeOutScale'）；
});
}
$（运行动画）；
$（“#一”）。单击（运行动画）
.overlay{
位置：固定；
排名：0；
左：0；
身高：100%；
宽度：100%；
显示：表格；
背景色：rgb（3917496）；
z指数：10；
}
h1.thank-you-message{字体大小：12.0rem；显示：表格单元格；颜色：#fff；文本对齐：居中；
垂直对齐：中间；-webkit透视图：1000；-webkit字体平滑：抗锯齿；}
.谢谢{
-webkit动画持续时间：1s；
动画持续时间：1s；
-webkit动画填充模式：两者都有；
动画填充模式：两者都有；
-webkit动画计时功能：轻松输出；
动画计时功能：放松；
} 
@-webkit关键帧淡出缩放{
0%{可见性：可见；不透明度：1；变换：缩放（1）；/*CSS3*/
-moz变换：缩放（1）；/*Firefox*/
-webkit转换：缩放（1）；/*webkit*/
-o变换：缩放（1）；/*Opera*/
-ms变换：比例（1）；/*即9*/}
40%{不透明度：1；变换：变换：比例（0.75）；/*CSS3*/
-moz变换：缩放（0.75）；/*Firefox*/
-webkit变换：缩放（0.75）；/*webkit*/
-o变换：比例（0.75）；/*Opera*/
-ms变换：比例（0.75）；/*IE 9*/}
60%{不透明度：1；变换：变换：比例（0.75）；/*CSS3*/
-moz变换：缩放（0.75）；/*Firefox*/
-webkit变换：缩放（0.75）；/*webkit*/
-o变换：比例（0.75）；/*Opera*/
-ms变换：比例（0.75）；/*IE 9*/}
100%{可见性：隐藏；不透明度：0；
转换：-moz转换：缩放（0.5）；/*Firefox*/
-webkit变换：缩放（0.5）；/*webkit*/
-o变换：比例（0.5）；/*Opera*/
-ms变换：比例（0.5）；/*IE 9*/}
} 
@关键帧淡出比例{
0%{可见性：可见；不透明度：1；变换：比例（1）；}
40%{不透明度：1；变换：比例（0.75）；}
60%{不透明度：1；变换：比例（0.75）；}
100%{可见性：隐藏；不透明度：0；变换：比例（0.5）；}
} 
.fadeOutScale{
-webkit动画名称：fadeOutScale；
动画名称：淡出淡出；
}
.动画淡出{
-webkit动画持续时间：1s；
动画持续时间：1s；
-webkit动画填充模式：两者都有；
动画填充模式：两者都有；
-webkit动画计时功能：轻松输出；
一
$(".btn").click(function() {
    $("#overlay").removeClass("overlay animated-fade-out fadeOut").hide();
    $("#overlay h1").removeClass("thank-you-message animated-thank-you fadeOutScale");

    setTimeout(function(){
        $("#overlay").css('display','').addClass("overlay animated-fade-out fadeOut");
        $("#overlay h1").addClass("thank-you-message animated-thank-you fadeOutScale");
        },1);
    });