Question

$('a').hover(function(){
    $(this).stop();
    $(this).animate({
        color: '#22373A'
    }, 'slow');
}, function(){
    $(this).stop();
    $(this).animate({
        color: '#fe57a1'
    }, 'slow');
});

我使用它来改变悬停时元素的不透明度，但似乎它不适用于颜色变化。有什么想法或建议吗？

问候丹尼姆

Answer 1

您是否考虑过使用CSS过渡？

HTML：

<a href="#">foo</a>
<a href=#>bar</a>

CSS：

html {
  font: 2em/1.5 sans-serif;
}

a {
  color: #22373a;
  -webkit-transition: color 1s ease-out; /* Saf3.2+, Chrome */
  -moz-transition: color 1s ease-out; /* Firefox 4+ */
  -ms-transition: color 1s ease-out; /* IE10+ */
  -o-transition: color 1s ease-out; /* Opera 10.5+ */
  transition: color 1s ease-out;
}

a:hover, a:focus {
  color: #fe57a1;
}

演示：http://jsfiddle.net/HTDSJ/

Answer 2

根据documentation，我认为color不适用于animate。我不确定你是否熟悉色彩理论，但是在色轮上有多种方法可以从一个点到另一个点。它应该直接进入下一点吗？是否应该将同心椭圆移动到下一个点（只有50％的工作机会）？它应该沿线性极性函数传播吗？这太模糊了，因此我认为他们选择不实施。但是，有jQuery plugin for this。

淡化对链接颜色的影响

2 个答案: