jQuery动画:更改鼠标悬停时的背景颜色

Question

我想知道如何使用animate方法来更改mouserover上的背景颜色，从而为div的背景颜色添加动画效果：

我偶然发现了这篇文章，但它可以追溯到2010年-它指出你必须使用一个插件才能做到这一点：jQuery animate backgroundColor

但肯定的是，在2013年(有了更新的jQuery库)，肯定会有一种更简单的、浏览器支持的纯jQuery方式来实现这一点：

这是我的尝试：

$('div.entry-content div.one_third').on('hover',function(){
    $(this).animate({backgroundColor: '#f5f5f5'},400);
});

Answer 1

你只需要在jQuery，jQuery UI之后调用，它就会工作。我已经创建了一个简短的示例

$('.one').hover(

    function(){
        $(this).animate({'backgroundColor': '#f5f5f5'},400);
    },
    function(){
        $(this).animate({'backgroundColor': '#000'},400);
    }

); 

它对我来说很好

Answer 2

你仍然需要使用一个插件，因为jQuery本身并不支持彩色动画。有些人推荐jQuery UI，但如果你只想要彩色动画，那就太夸张了，在这种情况下，你需要使用this plugin (例如)。

另一种方法是切换具有不同背景颜色的类，并设置CSS过渡。这是一个更干净、更好的解决方案，但没有得到很好的支持。