0

私のスペリングゲームでは、ユーザーが文字をクリックして、グリッド上のスロットにアニメーション化して単語をスペリングします。

単語のスペルが正しい場合、「wordglow2」と呼ばれるスタイルが適用され、単語が消えて背後の画像が表示されるように設計されています。これがゲームの目的です。

ユーザーが単語を間違えると、その単語に対して2回目の試行が行われます。ユーザーが単語を間違えると、「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/

4

2 に答える 2

1

これを行うには、removeClassメソッドを使用します。removeClass呼び出し自体に期間/アニメーションを設定できます。

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

これにより、クラスが削除され、トランジションがアニメーション化されます。おそらく、探しているものです。

于 2012-08-23T08:21:16.267 に答える
1

私はあなたが何をしたいのかよくわかりませんが、このような何かがそれをカットするかもしれません：

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

http://jsfiddle.net/cTGGA/

于 2012-08-27T14:40:02.577 に答える