2015-10-05 127 views
3

你好,所以我想要做的是使用jquery動畫按鈕背景顏色。使用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. :我正在使用引導程序

回答

6

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>