微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

为什么我不能让我的 jquery 在点击按钮时淡入淡出？

分类：编程问答

如何解决为什么我不能让我的 jquery 在点击按钮时淡入淡出？

#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>

`

解决方法

为了实现您最初的目标，一切都很好，除了：您需要在最初隐藏您的 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>

,

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

我有点赞同另一个答案，并假设您正在尝试制作游戏。没想到你可以用这么几行代码就可以享受几个小时的乐趣。

$('.selections button').click(function() {
    let player = this.getAttribute('data-selection'),ai = ['rock','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);
  });    
});
,

我使用了 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>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot