单击按钮时淡出图像，更改图像url，然后淡入。该怎么做呢？

<button id="fadeButton">点击淡出</button>
<img id="image" src="原始图像URL" alt="图像">

#image {
  transition: opacity 0.5s ease-in-out; /* 设置淡入淡出的过渡效果 */
}

.fade-out {
  opacity: 0; /* 淡出时将透明度设置为0 */
}

.fade-in {
  opacity: 1; /* 淡入时将透明度设置为1 */
}

var fadeButton = document.getElementById("fadeButton");
var image = document.getElementById("image");

fadeButton.addEventListener("click", function() {
  image.classList.add("fade-out"); // 添加淡出的CSS类
  setTimeout(function() {
    image.src = "新的图像URL"; // 更改图像URL
    image.classList.remove("fade-out"); // 移除淡出的CSS类
    image.classList.add("fade-in"); // 添加淡入的CSS类
  }, 500); // 设置延迟，确保淡出效果完成后再进行URL更改和淡入操作
});