在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

fadeTo()修改元素的不透明度。因此，show()无效，因为它已经显示。尝试改用fadeIn()。 fadeIn()将使不透明度达到100％。

Answer 2

使用不透明度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>

Answer 3

您可以使用fadeToggle()在状态之间切换。更多信息here。