为什么我不能让我的 jquery 在单击按钮时淡入？答案

【问题标题】：why can't I get my jquery to fade in on click of button?为什么我不能让我的 jquery 在单击按钮时淡入？
【发布时间】：2021-09-09 00:23:02
【问题描述】：

#rock {
  display: none;
  position: relative;
  left: 49.4%
}

#paper {
  display: none;
  position: relative;
  left: 49%;
  bottom: 81px;
}

#scissors {
  display: none;
  position: relative;
  left: 48.14%;
  bottom: 162px;
}

#shoot {
  display: none;
  position: relative;
  left: 48.7%;
  bottom: 243px;
}

我试图让这些 h2 元素在单击三个按钮之一后一个接一个地淡入然后淡出，但是我的 JQuery 不适用于淡入部分（我正在尝试使用这个因为我是 JavaScript 和 JQuery 的新手，所以我是零碎的）。这是我的脚本：

$(document).ready(function(){
  $("button").click(function(){
    $("#rock").fadeIn();
    $("#paper").fadeIn();
    $("#scissors").fadeIn("slow");
    $("#shoot").fadeIn(3000);
  });
});

    <div class="selections">
      <button class="selection" data-selection="rock">&#128507;</button>
      <button class="selection" data-selection="paper">????</button>
      <button class="selection" data-selection="scissors">&#9986;</button>
    </div>
    <h2 class="chant" id="rock">Rock</h2>
    <h2 class="chant" id="paper">Paper</h2>
    <h2 class="chant" id=scissors>Scissors</h2>
    <h2 class="chant" id="shoot">Shoot!</h2>

【问题讨论】：

您的代码应该已经正确淡入这些元素。请记住，要让淡入效果真正发挥作用，它必须被隐藏起来。

标签： javascript html jquery fadein fade

【解决方案1】：

我使用了 document.ready 函数并使用了 .fadeIn .fadeOut 效果。我将每个 h2 元素单独隐藏在我的 html 中并找到了这个解决方案。我现在唯一遇到的问题是在运行脚本时屏幕会扩展并移动一些元素。

//Displays the chant 'Rock Paper Scissors Shoot!' after one of the buttons is clicked
$(document).ready(function(){
  $('button').click(function(){
    $('#rock').fadeIn(500).delay(1000).fadeOut(500);
    $('#paper').delay(2000).fadeIn(500).delay(1000).fadeOut(500);
    $('#scissors').delay(4000).fadeIn(500).delay(1000).fadeOut(500);
    $('#shoot').delay(6000).fadeIn(500);
  });
});

@import
  url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Display:wght@100&display=swap');

*{
  font-family: "Big Shoulders Stencil Display", sans-serif;
}

body {
  background-size: contain;
  background-color: #A80289;
}

.game {
  margin: 40px 0 0 0;
  font-size: 55px;
  text-align: center;
  letter-spacing: 3px;
}

.selections {
  display: flex;
  justify-content: center;
  margin: 20px 0 0 0;
}

button {
  padding: 0 20px 0 20px;
}

.selection {
  background: none;
  border: none;
  font-size: 50px;
  cursor: pointer;
  transition: 100ms;
}

.selection:hover {
  transform: scale(1.2);
}

.chant {
  border: none;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 3px;
}

#rock {
  position: relative;
  left: 49.4%
}

#paper {
  position: relative;
  left: 49%;
}

#scissors {
  position: relative;
  left: 48.14%;
}

#shoot {
  position: relative;
  left: 48.7%;
}

.winner {
  margin: 1rem;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(2, .2fr);
  justify-items: center;
  align-items: center;
  position: relative;
  top: 100px;
  font-size: 25px;
  letter-spacing: 2px;
  font-weight: bold;
}

.winner-score {
  margin: 0 0 0 8px;
  font-size: 75%;
}

.result-selection {
  opacity: .5;
  font-size: 20px;
}
.result-selection.winner {
  opacity: 1;
  font-size: 30px;
  position: relative;
  top: 0;
}

/*Media Queries*/
  /*Tablets and smaller*/
@media(max-width: 768px) {
  .game {
    margin: 40px 0 0 0;
    font-size: 45px;
    text-align: center;
    letter-spacing: 3px;
  }

  .selection {
    font-size: 40px;
  }

  .chant {
    font-size: 40px;
    letter-spacing: 3px;
  }

  #rock {
    position: relative;
    left: 48%
  }

  #paper {
    position: relative;
    left: 47.62%;
  }

  #scissors {
    position: relative;
    left: 45.7%;
  }

  #shoot {
    position: relative;
    left: 46.5%;
  }

  .winner {
    font-size: 24px;
  }
}

  /*Mobile*/
@media(max-width: 500px) {
  .game {
    margin: 40px 0 0 0;
    font-size: 40px;
    text-align: center;
    letter-spacing: 3px;
  }

  .selection {
    font-size: 35px;
  }
  .chant {
    font-size: 40px;
    letter-spacing: 3px;
  }

  #rock {
    position: relative;
    left: 47.26%
  }

  #paper {
    position: relative;
    left: 46.27%;
  }

  #scissors {
    position: relative;
    left: 43.19%;
  }

  #shoot {
    position: relative;
    left: 45%;
  }

  .winner {
    font-size: 22px;
  }
}

<!DOCTYPE html>
<html lang="en" {IF CLASSES}class="classes"{/IF}>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="myscript.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <title>Rock Paper Scissors</title>
    <meta charset="UTF-8">
    <meta name="viewpoint" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="game">
      <h1>Rock Paper Scissors</h1>
    </div>
    <div class="selections">
      <button class="selection" data-selection="rock">&#128507;</button>
      <button class="selection" data-selection="paper">?</button>
      <button class="selection" data-selection="scissors">&#9986;</button>
    </div>
    <h2 class="chant" hidden id="rock">Rock</h2>
    <h2 class="chant" hidden id="paper">Paper</h2>
    <h2 class="chant" hidden id=scissors>Scissors</h2>
    <h2 class="chant" hidden id="shoot">Shoot!</h2>
    <div class="winner">
      <div>
        Player
        <span class="winner-score" data-your-score>0</span>
      </div>
      <div data-final-column>
        Computer
        <span class="winner-score" data-computer-score>0</span>
      </div>
<!--
      <div class="result-selection winner">&#9986;</div>
      <div class="result-selection">?</div>
-->
    </div>
  </body>
</html>

【讨论】：

【解决方案2】：

您无需启动它们display:none。相反，您可以在没有文本的情况下启动它们，然后 .hide() 它们并在它们 .fadeIn() 之前设置 .text()。

我有点同意另一个答案，并假设您正在尝试制作游戏。没想到你可以用这么几行代码来玩上几个小时。

$('.selections button').click(function() {
    let player = this.getAttribute('data-selection'),
        ai = ['rock', 'paper', 'scissors'][Math.round(Math.random() * 2)],
        outcome = player === ai ? 'TIE' :
          ((player === 'rock' && ai === 'scissors') ||
          (player === 'paper' && ai === 'rock') ||
          (player === 'scissors' && ai === 'paper')) ? 'WIN' :
          'LOST';
        
    $('.chant').hide();
    $('.chant.player').text(player).fadeIn();
    $('.chant.ai').text(ai).fadeIn('slow');
    $('.chant.outcome').text(outcome).fadeIn(3000);
  });

<div class="selections">
  <button data-selection="rock">&#128507;</button>
  <button data-selection="paper">?</button>
  <button data-selection="scissors">&#9986;</button>
</div>
<h2 class="chant player"></h2>
<h2 class="chant ai"></h2>
<h2 class="chant outcome"></h2>

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

或者，如果您想确保它们按顺序淡入，.fadeIn() 允许 on complete 回调，因此您可以嵌套它们：

$('.chant.player').text(player).fadeIn(function() {
  $('.chant.ai').text(ai).fadeIn('slow', function() {
    $('.chant.outcome').text(outcome).fadeIn(3000);
  });    
});

【讨论】：

【解决方案3】：

为了实现您的初始目标，一切都很好，除了：您需要隐藏您的 h2 最初，您可以使用 hidden 属性来做到这一点。

我可能会为此遇到麻烦，但我想我会展示一种完成游戏的方法。代码在下面注释。如果您只想显示关联按钮 h2，请访问该元素的 data()

$(document).ready(function() {
  let choices = ['rock', 'paper', 'scissors']; // our choices
  $("button").click(function() {
    $('.chant').hide(); // hide all h2s for the round
    $("#" + $(this).data("selection")).fadeIn(); // my selection - $(this).data("selection") grabs the data-selection attribute of the button ( $(this) ) which was clicked 
    let computer = choices[Math.floor(Math.random() * 3)]; // a random computer choice
    $("#computer").html(computer.toUpperCase()).fadeIn("slow"); // new element #computer takes random value as html and fades in

    // our chooser logic - we compare the index positions of the 2 choices
    let msg, diff = choices.indexOf($(this).data("selection")) - choices.indexOf(computer);
    if (diff === 0) msg = "Its a Tie";
    else if (diff > 0 || diff === -2) msg = "You Won!";
    else msg = "Shoot!";
    $("#shoot").html(msg).fadeIn(3000);
    // $("#paper").fadeIn();
    // $("#scissors").fadeIn("slow");
    // $("#shoot").fadeIn(3000);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selections">
  <button class="selection" data-selection="rock">&#128507;</button>
  <button class="selection" data-selection="paper">?</button>
  <button class="selection" data-selection="scissors">&#9986;</button>
</div>
<h2 class="chant" hidden id="rock">Rock</h2>
<h2 class="chant" hidden id="paper">Paper</h2>
<h2 class="chant" hidden id="scissors">Scissors</h2>
<h2 class="chant" hidden id="computer"></h2>
<h2 class="chant" hidden id="shoot">Shoot!</h2>

【讨论】：

我有个主意...可能是$("#" + $(this).data("selection")).fadeIn(); 可以解释一下，正如@Alx_Wil95 所说I'm new to JavaScript and JQuery