使用 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。 : 我正在使用 bootstrap

Answer 1

jQuery 无法原生设置颜色动画。您需要使用插件，例如：http://www.bitstorm.org/jquery/color-animation/.

假设您不需要支持 IE9 或更低版本，您可以使用 CSS 转换比这更好。

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>

使用 jquery 动画背景颜色

animating background colors using jquery

javascript

jquery

background-color

mouseenter