在我的拼写游戏中,用户单击字母以使它们动画到网格上的插槽中以拼写单词。
我已经设计了它,所以当一个单词拼写正确时,会应用一种称为“wordglow2”的样式,使单词消失并显示背后的图片 - 这是游戏的目标。
当用户读错单词时,他/她会再次尝试该单词。当用户输入错误的单词时,一种名为“wordglow4”的样式将应用于该单词,使其发出红色光。问题是应用于错误单词的样式不会消失以腾出空间进行另一次尝试。
单击单词的第三个字母(尝试)后,如何使样式消失 2 秒?
此代码根据单词是对还是错来应用样式...
if (!$('.drop-box.spellword:not(.occupied)').length) {
var wordIsCorrect = 0;
$('.drop-box.spellword').each(function() {
if ($(this).attr("data-letter") == $(this).find("div").attr("data-letter")) {
wordIsCorrect++;
}
});
console.log(wordIsCorrect);
console.log($('.drop-box.spellword').length);
if ($('.drop-box.spellword').length == wordIsCorrect) {
$('.drop-box.spellword').addClass('wordglow2');
$(right).val('Well Done!');
$(right).show();
audioS.play();
$('.counter').html(completeWords + '/6').show();
$(wrong).hide();
$('.minibutton').prop('disabled', false);
} else {
$('.drop-box.spellword').addClass("wordglow4").css('color', 'transparent');
$(wrong).val('Try Again');
$('.minibutton').prop('disabled');
$(wrong).show();
audioF.play();
$('.counter').html(completeWords + '/6').show();
$(right).hide();
$('.minibutton').prop('disabled', true);
}
}
});
}
var completeLetters = $('.wordglow2').length;
var completeWords = (completeLetters / 3);
$('.counter').html(completeWords + '/6');
if (completeWords == 3) {
$('table').fadeOut(2000);
}
var incompleteWords = $('.spellword').hasClass('.wordglow4').length;
if (incompleteWords == 3) {
$('.minibutton').prop('disabled', false);
}
});
我试过这个...
if $('.drop-box.spellword').hasClass("wordglow4") {
$("wordglow4").fadeOut(2000);
}
这是一个工作小提琴...... http://jsfiddle.net/smilburn/3qaGK/25/