Javascript jQuery淡出功能在单击时不起作用

我有一个HTML容器消息，它淡入淡出，持续30秒。我想有一个“关闭”功能，并希望点击事件淡出隐藏容器。但它不适用于先前的

淡出

（函数（）{
$（“.container”）
.延迟（1000）。法代因（500）
.延迟（30000）。衰减（500）；
$（“按钮”）。单击（函数（）{
$（“.container”）.fadeOut（500）；
});
}());
.container{
背景色：#ccc；
显示：无；
填充：1rem；
宽度：100px；
}

你好，世界
关闭
使用
设置超时
排队等待30秒的淡出

：

const container=$（'.container'）；
容器
.延迟（1000）
.fadeIn（500）；
setTimeout（（）=>容器淡出（500），31000）；
$（“按钮”）。单击（函数（）{
容器。衰减（500）；
});
.container{
背景色：#ccc；
显示：无；
填充：1rem；
宽度：100px；
}

你好，世界
关闭