我一直在做一个＆＃34;西蒙式游戏＆＃34;哪里有四个灰色按钮，按下开始按钮后，一个按钮会亮起绿色然后再变为灰色，然后下一个按钮会亮起绿色，然后变回灰色等，然后你必须重复点亮订购。他们似乎唯一的问题就是J-Query在添加和删除类之间没有起作用的.delay（）效果（顺便说一句，忘记提及我通过添加然后删除一个类使它变亮绿色）。有人可以告诉我一个延迟的方法，如果你能解释你的步骤会更好。我的代码将在下面。谢谢你的时间！ （下面的代码显示了使用的所有策略都失败了。）
#screen {
height:600px;
width:1000px;
/*background-color:#000000*//*For Visual Purposes*/
margin-left:auto;
margin-right:auto;
}
#lvlselect {
height:510px;
width:600px;
background-color:#FFA500;
position:absolute;
border-radius:100px;
border:5px solid #CC8400;
z-index:-1;
margin-left:200px;
margin-top:-30px
}
#instructions {
height:500px;
width:700px;
background-color:#000000;
color:#FFFFFF;
font-size:34px;
border-radius:60px;
border:5px solid #191919;
text-align:center;
margin-left:auto;
margin-right:auto;
text-shadow:4px 1px 6px #4C4C4C;
margin-top:-40px;
}
#headingINS {
font-size:50px;
}
#easy {
height:120px;
width:300px;
background-color:#19FF19;
border-radius:40px;
cursor:pointer;
text-align:center;
margin-left:auto;
margin-right:auto;
border:1px solid #000000;
}
#medium {
height:120px;
width:300px;
background-color:#FFFF19;
border-radius:40px;
cursor:pointer;
text-align:center;
margin-left:auto;
margin-right:auto;
border:1px solid #000000;
}
#hard {
height:120px;
width:300px;
background-color:#FF0000;
border-radius:40px;
cursor:pointer;
text-align:center;
margin-left:auto;
margin-right:auto;
border:1px solid #000000
}
.gamemode {
font-size:80px;
line-height:120px
}
#ready {
height:150px;
width:300px;
background-color:#0000E5;
border-radius:80px;
border:3px solid #0000B2;
margin-left:auto;
margin-right:auto;
text-align:center;
line-height:150px;
font-size:60px;
position:absolute;
margin-left:350px;
margin-top:-250px;
cursor:pointer;
}
#readytwo {
height:150px;
width:300px;
background-color:#0000E5;
border-radius:80px;
border:3px solid #0000B2;
margin-left:auto;
margin-right:auto;
text-align:center;
line-height:150px;
font-size:60px;
position:absolute;
margin-left:350px;
margin-top:100px;
cursor:pointer;
}
.buttonone {
height:200px;
width:400px;
background-color:#A6A6A6;
border-radius:50px;
margin-top:-50px;
margin-left:66px;
position:absolute;
border:3px solid #4C4C4C;
}
.buttontwo {
height:200px;
width:400px;
background-color:#A6A6A6;
border-radius:50px;
position:absolute;
margin-top:-50px;
margin-left:532px;
border:3px solid #4C4C4C;
}
.buttonthree {
height:200px;
width:400px;
background-color:#A6A6A6;
border-radius:50px;
margin-top:200px;
margin-left:66px;
position:absolute;
border:3px solid #4C4C4C;
}
.buttonfour {
height:200px;
width:400px;
background-color:#A6A6A6;
border-radius:50px;
margin-top:200px;
margin-left:532px;
position:absolute;
border:3px solid #4C4C4C;
}
.liteup {
height:200px;
width:400px;
background-color:#008000;
border-radius:50px;
margin-top:-50px;
margin-left:66px;
position:absolute;
border:3px solid #007300;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
function wait(ms) {
var d = new Date();
var n = d.getTime() + ms;
var t = 0;
while(n > t){
d = new Date();
t = d.getTime();
//alert(t);
//location.update(true);
}
//for (i = 1; i < itterations; i++);
};
function liteup(controlid) {
document.getElementById(controlid).className = 'liteup';
};
function liteoff(controlid) {
document.getElementById(controlid).className = '';
};
$(document).ready(function() {
$('#lvlselect').hide();
$('#readytwo').hide();
$('#easy').hide();
$('#medium').hide();
$('#hard').hide();
$('.buttonone').hide();
$('.buttontwo').hide();
$('.buttonthree').hide();
$('.buttonfour').hide();
$('#easy').hover(function() {
$(this).css('width', '350px');
$(this).css('height', '170px');
$(this).css('background-color', '#00E500');
}, function() {
$(this).css('background-color', '#19FF19');
$(this).css('height', '120px');
$(this).css('width', '300px');
});
$('#medium').hover(function() {
$(this).css('width', '350px');
$(this).css('height', '170px');
$(this).css('background-color', '#FFFF00');
}, function() {
$(this).css('background-color', '#FFFF19');
$(this).css('height', '120px');
$(this).css('width', '300px');
});
$('#hard').hover(function() {
$(this).css('width', '350px');
$(this).css('height', '170px');
$(this).css('background-color', '#E50000');
}, function() {
$(this).css('background-color', '#FF0000');
$(this).css('height', '120px');
$(this).css('width', '300px');
});
$('#ready').hover(function() {
$(this).css('background-color', '#0000B2');
}, function() {
$(this).css('background-color', '#0000E5');
});
$('#readytwo').hover(function() {
$(this).css('background-color', '#0000B2');
}, function() {
$(this).css('background-color', '#0000E5');
});
$('#ready').click(function() {
$('#instructions').hide();
$(this).hide();
$('#lvlselect').fadeIn(1);
$('#easy').fadeIn(1);
$('#medium').fadeIn(1);
$('#hard').fadeIn(1);
});
$('#easy').click(function() {
$('#lvlselect').hide();
$('#easy').hide();
$('#medium').hide();
$('#hard').hide();
$('.buttonone').fadeIn(1);
$('.buttontwo').fadeIn(1);
$('.buttonthree').fadeIn(1);
$('.buttonfour').fadeIn(1);
$('#readytwo').fadeIn(1);
$('#readytwo').click(function() {
liteup("buttonone");
setTimeout(function(){liteoff("buttonone"); }, 0);
setTimeout(function(){liteup("buttontwo"); }, 2000);
setTimeout(function(){liteoff("buttontwo"); }, 4000);
liteup("buttontwo");
liteup("buttonthree");
liteup("buttonfour");
$(this).hide();
$(".buttonone").addClass("liteup").delay(1000).queue(function(next){
$(this).removeClass("liteup");
next();
});
$(".buttonthree").addClass("liteup").delay(1000).queue(function(next){
$(this).removeClass("liteup");
next();
});
});
});
});
</script>