0

私はJavascript/JQueryを学んでいます。

私は数当てゲームを書いていますが、ユーザーが間違って推測した場合に.animate()変更backgroundColorしようとしています。id私はこれのいくつかの例を見てきましたが、特に私が使用しようとしている JQuery サイトで 1 つを見つけました。

ここでコードを見ることができます: https://github.com/thecompu/hc

それ以外の場合は、以下です。

注: ブラウザで を実行するindex.htmlと、乱数がコンソールに記録されますが、コンソールを開いていない場合は表示されません。ただし、数の選択は 1 ～ 10 の間のみです。

これで何が起こるかというと、間違った番号を推測した場合、もう一度プロンプトが表示されるようになりました。しかし、ボディの背景の色を赤に変えたいです。代わりに、ユーザーが正解した後に背景色が変更され、アニメーションは表示されません。

$(document).ready(function () {
    var answer = Math.floor(Math.random() * 10) + 1;
    console.log(answer);

    function game() {
        var guess = prompt("Choose a number!");
        guess = Number(guess);
        if (guess !== answer) {
            $("#bg").animate({
                backgroundColor: "#F00",
                color: "#000",
            }, 1000);
            console.log("Nope!");
            game();
        } else {
            console.log("Yay!");
        }
    }
    game();
});
4

2 に答える 2

3

jQuery をネイティブに使用して背景色をアニメーション化することはできません。ただし、本体クラスのみを使用して、CSS トランジションを使用して同じことを行うことができます。

CSS

body
{
    transition: 1s;
    -webkit-transition: 1s;
}

body.blue
{
    background: blue;
}

body.red
{
    background: red;
}

次に、このフィドルのように、javascript を使用して本体にクラスを追加するだけです。

http://jsfiddle.net/jakelauer/bUNkJ/

于 2013-08-16T19:10:40.103 に答える
1

プロジェクトに jquery color が含まれていても、問題は解決しません。問題の原因は の使用ですprompt。ブラウザーの実行が発生しないようにし、再呼び出しを続けるため、アニメーションが発生する機会を与えることはありません。

これは、jquery-ui (プロジェクトの一部でした) と jquery.color を使用したイベント駆動型のアプローチです。完璧にはほど遠いですが、次のようなアイデアが得られます。

$(document).ready(function () {
    $('#guessPrompt').dialog({
        autoOpen: false,
        buttons: {}
    });

    $('#guessInput').keypress(function () {
        if ($('#guessInput').val() != answer) {
            $('#guessInput').val('');
            $('#guessPrompt').dialog('close');
            $("#bg").animate({
                backgroundColor: "#F00",
                color: "#000"
            }, {
                duration: 1000,
                always: function () {
                    console.log('hi');
                    $('#guessPrompt').dialog('open');
                    $('#bg').css('backgroundColor', '#888');
                }
            });
            console.log('Nope');
        } else {
            console.log('yay');
        }
    });
    var answer = Math.floor(Math.random() * 10) +1;
    $('#guessPrompt').dialog('open');
});
于 2013-08-16T19:26:34.877 に答える