悬停动画失败答案

【问题标题】：Hover animation fail悬停动画失败
【发布时间】：2014-02-17 05:15:02
【问题描述】：

我正在对按钮进行动画效果，但它不能正常工作。鼠标悬停时会慢慢显示颜色，鼠标离开时会慢慢恢复正常。

我从jQuery Animate text-color on hover举了一个例子

这里是 jsfiddle： http://jsfiddle.net/eTymf/1/

$('.buttons').hover(
            function() {
                console.log(this);
                // do this on hover
                $(this).animate({
                    'borderBottomColor': '#2E9ECE',
                    'background-color': '#2E9ECE'
                }, 'slow');
            }, 
            function() {
                // do this on hover out
                $(this).animate({
                    'borderBottomColor': '#FFDF85',
                    'background-color': '#FEFEFE'
                }, 'slow');
        });

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

您的代码很完美，您只需要包含 JQuery UI 库...

JQuery UI library and CSS included.

这是更新后的示例：http://jsfiddle.net/nickg1/eTymf/4/

【讨论】：

【解决方案2】：

如果你真的想使用 jQuery：

背景色动画不是 .animate() 方法的一部分。你需要 jQuery 颜色动画插件 http://www.bitstorm.org/jquery/color-animation/ 或 Nick G 建议的 jQuery UI 之类的东西。

另外，您必须将 background-color 更改为 backgroundColor

【讨论】：

需要注意的是，jQuery UI（Rakesh 的小提琴实现的）使用github.com/jquery/jquery-color。您可以单独使用它，而不是要求您的用户下载所有 jQuery UI。纯 CSS 更简单。

【解决方案3】：

我们也可以通过 css 来实现。

将以下代码添加到您的 css 中

.buttons{
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -ms-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
}

工作示例：Demo

jQuery 解决方案：Demo

$('.buttons').mouseover(function() {
        // do this on hover
        $(this).animate({
            'background-color': '#000000',
            'color': '#2E9ECE'
        }, 'slow');
    })
.mouseleave(
    function() {
        // do this on hover
        $(this).animate({
            'background-color': '#fff',
            'color': '#333333'
        }, 'slow');
    });

【讨论】：

它在旧版浏览器（ie8 及以下）中不起作用。所以我也发布了 jquery 解决方案。对于 jQuery，您还必须添加 jQuery UI。

【解决方案4】：

您可以使用.mouseenter() 和.mouseleave() 代替这两个不同的事件。

【讨论】：

【解决方案5】：

尝试使用.css 而不是.hover

Demo

jQuery

//menu cool animation
$('.buttons').hover(

function () {
    console.log(this);
    // do this on hover
    $(this).css({
            'background-color': '#2E9ECE'
    }, 'slow');
},

function () {
    // do this on hover out
    $(this).css({
            'background-color': '#FEFEFE'
    }, 'slow');
});

【讨论】：

【解决方案6】：

普通的 Jquery 动画属性只接受一个数字。要使颜色字符串起作用，您需要 jquery 颜色插件。

包括jquery Color 插件。

【讨论】：