当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Adding delay in J-Query between adding and removing classes

问题描述:

I've been working on a "simon type game" Where there are four grey buttons, and after the start button is pressed one button will light up green then go back to grey, then the next button will light up green, then back to grey, etc. and then you must repeat the light up order. They only problem I seem to have is that the .delay() effect that J-Query has doesn't work between adding and removing classes (By the way forgot to mention I make it light up green by adding then removing a class). Can someone show me a way to get a delay in, and if you could explain your steps that would be even better. My code will be below. Thanks for your time! (The code bellow shows multiple tactics used that all of course failed).

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

分享给朋友:
您可能感兴趣的文章:
随机阅读: