JQuery　一瞬色を変えてもとに戻したい

タイピングゲームを作成しております。
概ねできあがったのですが、タイプミスをしたときに背景を一瞬白くしてすぐに戻すということを実装したいのですが、うまく行きません。
webアプリでjqueryを使っています。
タイプされたものがあっている場合とあっていない場合をifでわけて、あっていない場合に

jquery
1$('body').css('background-color', 'white');
2$('body').delay(100).queue(function () {
3   $(this).css('background-color', 'rgb(206, 198, 198)');
4});

としています。
すると1回目は思ったようになるのですが、なぜか2回以上タイプミスをすると白いままになってしまいます。
よろしくお願いいたします。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<link rel="stylesheet" type="text/css" href="./reset.css">
6<link rel="stylesheet" type="text/css" href="./main.css">
7<!-- <link rel="stylesheet" type="text/js" href="js/index.js"> -->
8<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"> -->
9<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
10<script src="./main.js"></script>
11<title>Let's Typing!</title>
12</head>
13<body>
14<div class="background">
15<div class="question"></div>
16<div class="keyboard">
17<ul class="line0">
18<li class="49 key1">1</li>
19<li class="50">2</li>
20<li class="51">3</li>
21<li class="52">4</li>
22<li class="53">5</li>
23<li class="54">6</li>
24<li class="55">7</li>
25<li class="56">8</li>
26<li class="57">9</li>
27<li class="58">0</li>
28<li class="189">-</li>
29<li class="222">^</li>
30<li class="220">¥</li>
31<li class="8 backspace">Back<br>space</li>
32</ul>
33<ul class="line1">
34<li class="9 tab">Tab</li>
35<li class="81 q">Q</li>
36<li class="87 w">W</li>
37<li class="69 e">E</li>
38<li class="82 r">R</li>
39<li class="84 t">T</li>
40<li class="89 y">Y</li>
41<li class="85 u">U</li>
42<li class="73 i">I</li>
43<li class="79 o">O</li>
44<li class="80 p">P</li>
45<li class="192 @">@</li>
46<li class="219 [">[</li>
47<li class="13 enter">Enter</li>
48</ul>
49<ul class="line2">
50<li class="17 control">Control</li>
51<li class="65 a">A</li>
52<li class="83 s">S</li>
53<li class="68 d">D</li>
54<li class="70 f">F</li>
55<li class="71 g">G</li>
56<li class="72 h">H</li>
57<li class="74 j">J</li>
58<li class="75 k">K</li>
59<li class="76 l">L</li>
60<li class="187">;</li>
61<li class="186">:</li>
62<li class="221">]</li>
63</ul>
64<ul class="line3">
65<li class="16 shift">Shift </li>
66<li class="90 z">Z</li>
67<li class="88 x">X</li>
68<li class="67 c">C</li>
69<li class="86 v">V</li>
70<li class="66 b">B</li>
71<li class="78 n">N</li>
72<li class="77 m">M</li>
73<li class="188">,</li>
74<li class="190">.</li>
75<li class="191">/</li>
76<li class="226">_</li>
77<li class="16 shift">Shift </li>
78</ul>
79<ul class="line4">
80<li class="capslock">Capslock</li>
81<li class="option">option</li>
82<li class="command">command</li>
83<li class="selectKey">英数</li>
84<li class="space">Space</li>
85<li class="selectKey">かな</li>
86<li class="command">command</li>
87<li class="">fn</li>
88<li class="37 selectKey">◀︎</li>
89<li class="nonBorder"><div class="38 selectKey">▲</div><div class="40 selectKey">▼</div></li>
90<li class="39 selectKey">▶︎</li>
91</ul>
92</div>
93</div>
94</body>
95</html>

css
1*{
2box-sizing: border-box;
3}
4
5body{
6background-color: rgb(206, 198, 198);
7}
8
9.question{
10color: rgb(61, 43, 43);
11text-align: center;
12font-size: 75px;
13font-weight: 600;
14padding: 50px;
15margin-bottom: 40px;
16}
17
18.question span:nth-child(1){
19color: red;
20}
21
22.keyboard ul{
23list-style: none;
24margin: 0 auto;
25text-align: center;
26height: 50px;
27width: 900px;
28}
29
30.keyboard li, .keyboard .selectKey{
31color: rgb(209, 144, 144);
32font-size: 25px;
33display: inline-block;
34border-radius: 10% 10%;
35min-width: 50px; /* */
36font-weight: 550;
37height: 50px; /* */
38vertical-align: top;
39line-height: 50px; /* */
40background-color: rgb(61, 43, 43);
41}
42
43.keyboard .backspace,.keyboard .tab,.keyboard .control,.keyboard .shift,.keyboard .capslock,.keyboard .option,.keyboard .command,.keyboard .space,.keyboard .enter{
44letter-spacing: -2px;
45font-size: 14px; /* */
46}
47
48.keyboard .backspace{
49line-height: 22.5px; /* */
50padding: 2px; /* */
51}
52
53.keyboard .nonBorder{
54height: 50px; /* */
55}
56
57.selectKey{
58line-height: 25px; /* */
59height: 25px; /* */
60display: block;
61}
62
63.keyboard .selectKey{
64width: 60px;
65font-size: 20px;
66}
67.keyboard .enter{
68height: 116px;
69width: 53px;
70margin-left: 24px;
71}
72
73.line0{
74padding-left: 1px;
75}
76
77.line2{
78padding-right: 57px;
79}
80.line3{
81padding-left: 4px;
82}
83.line4{
84padding-right: 3px;
85}
86.keyboard .key1{
87width: 76px;
88}
89.keyboard .control{
90width: 76px;
91}
92.keyboard .shift{
93width: 92px;
94}
95.keyboard .capslock,.keyboard .command{
96width: 69px;
97}
98.keyboard .space{
99width: 139px;
100}
101
102/* ハート基本 */
103
104.heart {
105width: 50px;
106height: 45px;
107position: relative;
108}
109.heart::before,
110.heart::after {
111position: absolute;
112content: "";
113left: 25px;
114top: 3px;
115width: 28px;
116height: 45px;
117background: red;
118border-radius: 50% 50% 0 0/31.3% 31.3% 0 0;
119transform: rotate(-45deg);
120transform-origin: 0 100%;
121z-index: -10;
122}
123.heart::after {
124left: -3px;
125background: red;
126transform: rotate(45deg);
127transform-origin :100% 100%;
128}

jquery
1$(function () {
2let questions = new Array("hello", "goodbye", "yes", "no");
3function selectQuestion() {
4let question = '';
5let randnum = Math.floor(Math.random() * 3);
6questions[randnum].split('').forEach(function (c) {
7question += '<span>'+c+'</span>';
8});
9$('.question').html(question);
10return randnum;
11};
12function setKey() {
13$(".keyboard ." + questions[qNumber][chrNumber-1]).html('<div class="heart">' + charactor + '</div>'); // ブラウザのキーボードに今問題の文字にhtmlを挿入する
14$(".keyboard ." + questions[qNumber][chrNumber-1]).children().css({ color: 'white', height: '50px', lineHeight: '46px' }); //色等をつける
15$(".keyboard ." + questions[qNumber][chrNumber-1]).css('background-color', 'transparent'); //元の色を消す
16};
17let chrNumber = 1; // 問題の言葉の何文字目か
18let qNumber = selectQuestion(); // 配列の何個目の言葉か（ランダムで選ばれた）
19let charactor = $(".keyboard ." + questions[qNumber][0]).text();
20setKey();
21$(window).keydown(function (e) {
22console.log(e.keyCode);
23if ($('.question span:nth-child(' + chrNumber + ')').text() == String.fromCharCode(e.keyCode).toLowerCase()) {
24// 色を戻す
25$('.question span:nth-child(' + chrNumber + ')').css('color', 'rgb(61, 43, 43)');
26$(".keyboard ." + String.fromCharCode(e.keyCode).toLowerCase()).html(String.fromCharCode(e.keyCode)).css({ color: 'rgb(209, 144, 144)', backgroundColor: 'rgb(61, 43, 43)' });
27if (chrNumber < questions[qNumber].length) {
28chrNumber += 1;
29charactor = $(".keyboard ." + questions[qNumber][chrNumber - 1]).text();
30// 色を変える
31$('.question span:nth-child(' + chrNumber + ')').css('color', 'red');
32setKey();
33} else {
34chrNumber = 1;
35qNumber = selectQuestion();
36charactor = $(".keyboard ." + questions[qNumber][0]).text();
37setKey();
38}
39} else {
40$('body').css('background-color', 'white');
41$('body').delay(100).queue(function () {
42$(this).css('background-color', 'rgb(206, 198, 198)');
43});
44}
45})
46})

kei344

2019/12/03 11:42

問題が起きるサイトのURL、もしくは状況の再現が可能なHTML/CSSを質問文に追記ください。

annaPanda

2019/12/03 11:48

```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="./reset.css"> <link rel="stylesheet" type="text/css" href="./main.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="./main.js"></script> <title>Let's Typing!</title> </head> <body> <div class="background"> <div class="question"></div> <div class="keyboard"> <ul class="line0"> <li class="49 key1">1</li> <li class="50">2</li> <li class="51">3</li> <li class="52">4</li> <li class="53">5</li> <li class="54">6</li> <li class="55">7</li> <li class="56">8</li> <li class="57">9</li> <li class="58">0</li> <li class="189">-</li> <li class="222">^</li> <li class="220">¥</li> <li class="8 backspace">Back<br>space</li> </ul> <ul class="line1"> <li class="9 tab">Tab</li> <li class="81 q">Q</li> <li class="87 w">W</li> <li class="69 e">E</li> <li class="82 r">R</li> <li class="84 t">T</li> <li class="89 y">Y</li> <li class="85 u">U</li> <li class="73 i">I</li> <li class="79 o">O</li> <li class="80 p">P</li> <li class="192 @">@</li> <li class="219 [">[</li> <li class="13 enter">Enter</li> </ul> <ul class="line2"> <li class="17 control">Control</li> <li class="65 a">A</li> <li class="83 s">S</li> <li class="68 d">D</li> <li class="70 f">F</li> <li class="71 g">G</li> <li class="72 h">H</li> <li class="74 j">J</li> <li class="75 k">K</li> <li class="76 l">L</li> <li class="187">;</li> <li class="186">:</li> <li class="221">]</li> </ul> <ul class="line3"> <li class="16 shift">Shift </li> <li class="90 z">Z</li> <li class="88 x">X</li> <li class="67 c">C</li> <li class="86 v">V</li> <li class="66 b">B</li> <li class="78 n">N</li> <li class="77 m">M</li> <li class="188">,</li> <li class="190">.</li> <li class="191">/</li> <li class="226">_</li> <li class="16 shift">Shift </li> </ul> <ul class="line4"> <li class="capslock">Capslock</li> <li class="option">option</li> <li class="command">command</li> <li class="selectKey">英数</li> <li class="space">Space</li> <li class="selectKey">かな</li> <li class="command">command</li> <li class="">fn</li> <li class="37 selectKey">◀︎</li> <li class="nonBorder"><div class="38 selectKey">▲</div><div class="40 selectKey">▼</div></li> <li class="39 selectKey">▶︎</li> </ul> </div> </div> </body> </html> ``` ```css *{ box-sizing: border-box; } body{ background-color: rgb(206, 198, 198); } .question{ color: rgb(61, 43, 43); text-align: center; font-size: 75px; font-weight: 600; padding: 50px; margin-bottom: 40px; } .question span:nth-child(1){ color: red; } .keyboard ul{ list-style: none; margin: 0 auto; text-align: center; height: 50px; width: 900px; } .keyboard li, .keyboard .selectKey{ color: rgb(209, 144, 144); font-size: 25px; display: inline-block; border-radius: 10% 10%; min-width: 50px; /* */ font-weight: 550; height: 50px; /* */ vertical-align: top; line-height: 50px; /* */ background-color: rgb(61, 43, 43); } .keyboard .backspace,.keyboard .tab,.keyboard .control,.keyboard .shift,.keyboard .capslock,.keyboard .option,.keyboard .command,.keyboard .space,.keyboard .enter{ letter-spacing: -2px; font-size: 14px; /* */ } .keyboard .backspace{ line-height: 22.5px; /* */ padding: 2px; /* */ } .keyboard .nonBorder{ height: 50px; /* */ } .selectKey{ line-height: 25px; /* */ height: 25px; /* */ display: block; } .keyboard .selectKey{ width: 60px; font-size: 20px; } .keyboard .enter{ height: 116px; width: 53px; margin-left: 24px; } .line0{ padding-left: 1px; } .line2{ padding-right: 57px; } .line3{ padding-left: 4px; } .line4{ padding-right: 3px; } .keyboard .key1{ width: 76px; } .keyboard .control{ width: 76px; } .keyboard .shift{ width: 92px; } .keyboard .capslock,.keyboard .command{ width: 69px; } .keyboard .space{ width: 139px; } /* ハート基本 */ .heart { width: 50px; height: 45px; position: relative; } .heart::before, .heart::after { position: absolute; content: ""; left: 25px; top: 3px; width: 28px; height: 45px; background: red; border-radius: 50% 50% 0 0/31.3% 31.3% 0 0; transform: rotate(-45deg); transform-origin: 0 100%; z-index: -10; } .heart::after { left: -3px; background: red; transform: rotate(45deg); transform-origin :100% 100%; } ``` ```jquery $(function () { let questions = new Array("hello", "goodbye", "yes", "no"); function selectQuestion() { let question = ''; let randnum = Math.floor(Math.random() * 3); questions[randnum].split('').forEach(function (c) { question += '<span>'+c+'</span>'; }); $('.question').html(question); return randnum; }; function setKey() { $(".keyboard ." + questions[qNumber][chrNumber-1]).html('<div class="heart">' + charactor + '</div>'); // ブラウザのキーボードに今問題の文字にhtmlを挿入する $(".keyboard ." + questions[qNumber][chrNumber-1]).children().css({ color: 'white', height: '50px', lineHeight: '46px' }); //色等をつける $(".keyboard ." + questions[qNumber][chrNumber-1]).css('background-color', 'transparent'); //元の色を消す }; let chrNumber = 1; // 問題の言葉の何文字目か let qNumber = selectQuestion(); // 配列の何個目の言葉か（ランダムで選ばれた） let charactor = $(".keyboard ." + questions[qNumber][0]).text(); setKey(); $(window).keydown(function (e) { console.log(e.keyCode); if ($('.question span:nth-child(' + chrNumber + ')').text() == String.fromCharCode(e.keyCode).toLowerCase()) { // 色を戻す $('.question span:nth-child(' + chrNumber + ')').css('color', 'rgb(61, 43, 43)'); $(".keyboard ." + String.fromCharCode(e.keyCode).toLowerCase()).html(String.fromCharCode(e.keyCode)).css({ color: 'rgb(209, 144, 144)', backgroundColor: 'rgb(61, 43, 43)' }); if (chrNumber < questions[qNumber].length) { chrNumber += 1; charactor = $(".keyboard ." + questions[qNumber][chrNumber - 1]).text(); // 色を変える $('.question span:nth-child(' + chrNumber + ')').css('color', 'red'); setKey(); } else { chrNumber = 1; qNumber = selectQuestion(); charactor = $(".keyboard ." + questions[qNumber][0]).text(); setKey(); } } else { $('body').css('background-color', 'white'); $('body').delay(100).queue(function () { $(this).css('background-color', 'rgb(206, 198, 198)'); }); } }) }) ``` お願いいたします。

kei344

2019/12/03 11:49

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。

kei344

2019/12/03 11:49

（質問文は編集できます）

annaPanda

2019/12/03 11:55

追記いたしました。ご指摘ありがとうございます。

行動規範の内容に同意します

回答2件

ベストアンサー

.dequeue()を実行する必要があるのでは。

js
1$( 'html' ).on( 'click', function () {
2	$( 'body' ).css( 'background-color', 'pink' );
3	$( 'body' ).delay( 100 ).queue( function () {
4		$( this ).css( 'background-color', 'rgb(206, 198, 198)' ).dequeue();
5	} );
6} );
7```**動くサンプル：**[https://jsfiddle.net/szjrp9tx/](https://jsfiddle.net/szjrp9tx/)
8
9---
10
11【.queue() | jQuery API Documentation】
12[https://api.jquery.com/queue/#queue-queueName-callback](https://api.jquery.com/queue/#queue-queueName-callback)
13
14【.dequeue() | jQuery API Documentation】
15[https://api.jquery.com/dequeue/](https://api.jquery.com/dequeue/)
16
17【jQuery でアニメーションの前後に .css() とか .addClass() とかしたい時に .queue() を使う - ダーシマ・ヱンヂニヤリング】
18[http://tsmd.hateblo.jp/entry/2013/01/17/214018](http://tsmd.hateblo.jp/entry/2013/01/17/214018)
19> 注意点として、 queue メソッドの引数に指定する関数内で、 $(this).dequeue() をする必要がある。 dequeue は処理が終了したという合図になるため、記述しないとキューの処理がそこで止まったままになってしまう。

投稿2019/12/03 15:29

kei344

総合スコア69596

annaPanda

2019/12/03 15:46

うお！素晴らしい。本当にありがとうございます。。

行動規範の内容に同意します

jquery
1$('body').css('background-color', 'white');
2setTimeout(function(){
3  $('body').css('background-color', 'rgb(206, 198, 198)');
4},100);

にしたらとりあえずできました。
が、上でなぜダメなのかわからないので、もし理由がわかる方がいれば教えていただきたいです。。

投稿2019/12/03 12:14

annaPanda

総合スコア130

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

JQuery　一瞬色を変えてもとに戻したい

関連した質問