Javascript 如果我使用jquery按下按钮，图像不会出现

我正在开发一张新年贺卡，我想在按下启动音乐的按钮后，从下方显示一张图像。 我如何使用jquery来实现它

$（文档）.ready（函数（）{
$（“.btn_music.fa play circle”）。在（'click'，function（）上{
$（this.hide（）；
$（'.fa暂停圆'）.fadeIn（）；
$（'#myMusic'）[0]。播放（）；
$（“#容器”）.烟花({
声音：true，//声音效果
不透明度：0.55，
宽度：“90%”，
身高：“10%”
}).play（）；
$（“#香槟”）.hide（）；
$（'香槟'）。滑动开关（1000）；
});
$（“.btn_music.fa暂停圈”）。打开（'单击'，函数（）{
$（this.hide（）；
$（'.fa play circle'）.fadeIn（）；
$（'#myMusic'）[0]。暂停（）；
});
});
正文{
背景：线性梯度（#000，#01f）；
字体：10.5em Arial；
}
html，
身体{
身高：100%；
}
.中风{
笔画：黄花；
笔划宽度：0.5px；
笔划数组：0 250；
笔画不透明度：1；
填充：无；
动画：笔划偏移8s无穷大；
动画计时功能：立方贝塞尔（0.25,0.46,0.45,0.94）；
}
@关键帧笔划偏移{
25% {
笔划数组：0 250；
笔画不透明度：1；
}
50% {
行程数组：250 0；
笔划不透明度：0.75；
}
55% {
行程数组：250 0；
笔画不透明度：0；
}
70% {
行程数组：250 0；
笔画不透明度：0；
}
75% {
行程数组：250 0；
笔划不透明度：0.75；
}
100% {
笔划数组：0 250；
笔画不透明度：1；
}
}
.填充{
填充物：黄金；
填充不透明度：0；
动画：填充偏移8s无穷大；
动画计时功能：立方贝塞尔（0.25,0.46,0.45,0.94）；
}
@关键帧填充偏移{
25% {
填充不透明度：0；
}
35% {
填充不透明度：0；
}
50% {
填充不透明度：1；
}
70% {
填充不透明度：1；
}
90% {
填充不透明度：0；
}
100% {
填充不透明度：0；
}
}
#淡入淡出文本{
字体系列：“舞蹈脚本”，草书；
字号：0.6em；
}
svg{
位置：绝对位置；
宽度：100%；
身高：100%；
}
.音乐{
位置：绝对位置；
最高：22%；
左：0；
右：0；
保证金：0自动；
}
.btn_音乐{
背景色：透明；
颜色：#fff；
字号：85px；
边界：无；
显示：块；
保证金：0自动；
不透明度：.1；
过渡：全线性。2s；
光标：指针；
大纲：无；
}
.btn_音乐：悬停{
不透明度：1；
}
.fa暂停圈{
显示：无；
}
#香槟酒{
显示：无；
宽度：300px；
高度：250px；
利润率：22%43%自动；
}

新年快乐！
2021


为什么不将单击事件绑定到按钮本身，并在一个标签上切换播放/暂停类？通过单击按钮，我可以启动/停止音乐并启动焰火，但我无法让照片从下方显示并停止火焰。我可以实现什么功能以及如何实现？为什么不将单击事件绑定到按钮本身，并在一个标记上切换播放/暂停类？通过单击按钮，我可以启动/停止音乐并启动焰火，但我无法让照片从下方显示并停止火焰。我可以实现什么功能来执行此操作？如何实现？