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

Question

我想知道如何使用 animate 方法为 div 的背景颜色设置动画以更改 mouserover 上的背景颜色：

我遇到了这篇文章，但它可以追溯到 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，但如果你只想要彩色动画，那就太过分了，在这种情况下，你需要使用这个插件（例如）。

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