淡出已经存在的图片，并淡出另一张图片

Question

我想让图像淡入，在淡入后，图像已更改为另一个。如果你进一步向下看代码，你可以看到，我有3个功能，帮助我改变图像与一个按钮点击。然而，动画淡出和淡出不工作。我试了试我的代码，但实际上什么也没发生。

var score = 0
function changeImage1() {
document.getElementById("image1").src = "gold.png";
document.getElementById("image2").src = "broken.png";
document.getElementById("image3").src = "broken.png";
score = 20
console.log("You have recieved " + score)
}
function changeImage2() {
document.getElementById("image1").src = "house.png";
document.getElementById("image2").src = "iron.png";
document.getElementById("image3").src = "iron.png";
score = 50
console.log(score)
}
function changeImage3() {
document.getElementById("image1").src = "iron.png";
document.getElementById("image2").src = "diamond.png";
document.getElementById("image3").src = "gold.png";
score = 0
console.log(score)
}
var time = 10;

<center>
<h1>Win or Lose your Life?💀</h1>
</center>
<img alt="" src="pickaxe.png" style="height: 200px; width: 200px" id="image1" />
<button onClick="fadeOut()"><img src="button.png" id="button1" onclick="changeImage1()"/></button>
<img alt="" src="iron.png" style="height: 200px; width: 250px" id="image2" />
<button onClick="fadeOut()"><img src="button.png" id="button2" onclick="changeImage2()"/></button>
<img alt="" src="Diamond.png" style="height: 200px; width: 200px" id="image3" />
<button onClick="fadeOut()"><img src="button.png" id="button3" onclick="changeImage3()"/></button>

Answer 1

你可以使用jquery的fadeOut()，它允许在fadeOut完成时回调。

下面是一个例子。当通过"src="设置时，第二个图像需要时间来加载。所以在改变旧图像之前它会淡入旧图像。这是一个糟糕的用户体验。

更好的是，正如评论中所指出的，有两个图像，因为它们将在页面加载时加载(第二个片段)。

使用src=

示例

var img1 = "https://i.stack.imgur.com/lxthA.jpg";
var img2 = "https://i.stack.imgur.com/OVOg3.jpg";
$("button").click(function() { 
$(this).find("img").fadeOut(function() { this.src = img2; $(this).fadeIn(); })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
click the image<br/>
<button class='btn'><img src="https://i.stack.imgur.com/lxthA.jpg"></button>

使用两个图像的例子

$("button>img").click(function() { 
$(this).fadeOut(function() { 
// only 1, so siblings is ok
$(this).siblings().fadeIn()
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
click the image<br/>
<button class='btn'>
<img src="https://i.stack.imgur.com/lxthA.jpg">
<img src="https://i.stack.imgur.com/OVOg3.jpg" style='display:none;'>
</button>