问题描述
我试图让这些 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">🗻</button>
<button class="selection" data-selection="paper">?</button>
<button class="selection" data-selection="scissors">✂</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">🗻</button>
<button class="selection" data-selection="paper">?</button>
<button class="selection" data-selection="scissors">✂</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">🗻</button>
<button data-selection="paper">?</button>
<button data-selection="scissors">✂</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">🗻</button>
<button class="selection" data-selection="paper">?</button>
<button class="selection" data-selection="scissors">✂</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">✂</div>
<div class="result-selection">?</div>
-->
</div>
</body>
</html>