Question

在我的拼写游戏中，用户点击这些字母使它们动画到网格上的插槽中拼写单词。

我设计了它，所以当一个单词拼写正确时，会应用一种称为“wordglow2”的样式，使该单词消失并显示背后的图片 - 这是游戏的目标。

当用户得到错误的单词时，他/她将再次尝试该单词。当用户得到错误的单词时，会将一个名为“wordglow4”的样式应用于该单词，使其呈现红色。问题是应用于错误单词的样式不会消失以清除另一次尝试的空间。

如何在单击单词的第3个字母后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/

Answer 1

使用removeClass方法执行此操作。您可以在removeClass调用本身上放置持续时间/动画：

$('.drop-box.spellword').removeClass("wordglow4", "2000");

这会移除类并为过渡设置动画，可能就是您要查找的内容。

Answer 2

我不太明白你想做什么，但这样的事情可能会削减它：

                $('.drop-box.spellword')
                    .animate({ 'opacity': 1 }, 2000, function()
                             {
                                $(this)
                                    .removeClass('wordglow4')
                                    .removeClass('occupied')
                                    .html('')
                                    });

http://jsfiddle.net/cTGGA/

一旦尝试就清除样式

2 个答案: