使用jquery動畫背景顏色

Question

你好，所以我想要做的是使用jquery動畫按鈕背景顏色。

$(document).ready(function(){ 
    $('button').mouseenter(function(){ 
     $('button').animate({ 
      background-color:"blue"},1000); 
    }); 
    $('button').mouseleave(function() { 
     $('button').animate({ 
      background-color:"white"},1000); 
    }); 
}); 

我做錯了什麼？還有一件事，你能像假人一樣解釋嗎？ ：D

P.S. ：我正在使用引導程序

Answer 1

jQuery不能在本機上爲動畫製作顏色。你需要使用一個插件，像這樣：http://www.bitstorm.org/jquery/color-animation/。

比你可以使用CSS轉換更好，假設你不需要支持IE9或更低版本。

button { 
 
    background-color: blue; 
 
    transition: background-color 1s; 
 
    -moz-transition: background-color 1s; 
 
    -webkit-transition: background-color 1s; 
 
    /* for prettyness only */ 
 
    border: 0; 
 
    color: #CCC; 
 
    border-radius: 5px; 
 
    padding: 10px; 
 
} 
 
button:hover { 
 
    background-color: white; 
 
} 
 
button a { 
 
    color: white; 
 
    transition: color 1s; 
 
    -moz-transition: color 1s; 
 
    -webkit-transition: color 1s; 
 
} 
 
button:hover a { 
 
    color: blue; 
 
}

<button><a href="#">Foo bar</a> 
 
</button>

Answer 2

jQuery的不天真地支持這一點。嘗試使用jQuery.color插件：

<script type="text/javascript" src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>