试图实现身体标记颜色变化

Question

我正在学习JavaScript/JQuery。

我正在写一个猜数游戏，如果用户猜测错误，我试图.animate() a backgroundColor更改为id。我已经看到了一些这方面的例子，特别是在我尝试使用的JQuery站点上找到了一个例子。

你可以看到这里的代码：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(); 
}); 

Answer 1

您不能使用jQuery原生地为背景颜色制作动画。但是，您可以使用CSS转换来执行相同的操作，只使用body类。

CSS

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

body.blue 
{ 
    background: blue; 
} 

body.red 
{ 
    background: red; 
} 

然后，只需一类使用JavaScript在这个小提琴补充人体，如：

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

Answer 2

即使包含在项目的jQuery颜色问题仍然仍然存在。问题的根源在于使用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'); 
});