jquery - 如何让悬停颜色淡入淡出？- jQuery，HTML

Question

一个例子：

这是我创建的一个 HTML 示例：http: //jsfiddle.net/Tgjnp/2/

问题：

CSS：

a {
    color: #bbb;
    text-decoration: none;
    margin-right: 2em;
    font-weight: bold;            
}

.green {
    color: green;                        
}

举个例子，集合class是为了得到fade animation，所以指定的颜色在 上淡入淡出mouse hover。除此之外，它应该恢复为默认颜色。

问题是，如何让悬停颜色淡入淡出？

Answer 1

您不能使用纯 jQuery 为颜色设置动画。为此，您必须使用某种插件，即jQuery UI（巨大的）或Color 动画插件

或者，您可以使用一些简单的 CSS3 过渡 - DEMO

这在较新的浏览器中效果很好，但在较旧的 IE-s 中却不行。

a {
    color: #bbb;
    text-decoration: none;
    margin-right: 2em;
    font-weight: bold;

    -webkit-transition: color .5s linear;   
       -moz-transition: color .5s linear; 
            transition: color .5s linear;    
}

Answer 2

这里有一个很好的解释。它不使用任何花哨的 CSS3 魔法，只使用 JQuery。只需添加结束和开始颜色，JQuery 就会为过渡设置动画。