javascript - 如何在 fadeTo() 之后初始化回原始状态？

Question

我让这张图片在点击按钮后淡出。如何使图像恢复到原始状态？

const playGame = () => {
  init(); 

  // logic removed for brevity
  $('#hero').fadeTo(2000, 0.4);
}

const init = () => {
  $('#hero').show();
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='hero'>
  <img src="hero.jpg">
</div>

<button onclick="playGame()">Fight!</button>

fadeTo() 有效，但是当我尝试使用 $('#hero').show(); 时它不起作用。为了简洁起见，我删除了逻辑。

Answer 1

使用不透明度 1

const playGame = () => {
  init(); 

  // logic removed for brevity
  $('#hero').fadeTo(2000, 0.4);
}

const init = () => {
  $('#hero').fadeTo(2000, 1);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='hero'>
  <img src="https://www.w3schools.com/bootstrap4/bird.jpg">
</div>

<button onclick="playGame()">Fight!</button>