試圖實現身體標記顏色變化

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'); 
});