jQuery Animate：在鼠标悬停时更改背景颜色

Question

我想知道如何使用animate方法为div更改背景颜色来设置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转换。这是一个更清洁，更好的解决方案，但不太受支持。