對鏈接顏色的淡入淡出效果

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

使用此功能可以在懸停時更改元素的不透明度，但似乎無法使用顏色更改。任何想法或建議？對鏈接顏色的淡入淡出效果

問候 dennym

來源

2012-02-14 Denny Mueller

http://api.jquery.com/animate/ *動畫屬性和值後的第1段* * ...但背景顏色不能，除非使用jQuery.Color（）插件... * – Yoshi 2012-02-14 18:57:28

謝謝吉西這是有幫助的，最後切換到過渡，相當容易:) – 2012-02-14 19:08:56

您是否考慮過使用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/

來源

2012-02-14 19:56:42 Sharon

已經這樣做了，謝謝 – 2012-02-16 15:37:26

按照該documentation，我不認爲color作品與animate。我不確定你是否熟悉色彩理論，但是在色輪上從一個點到另一個點有多種方法。它應該直奔下一個點嗎？是否應該將同心橢圓移動到下一個點（只有50％的工作機會）？它是否應該沿着極性線性函數行進？這太模糊了，出於這個原因，我認爲他們選擇不實施。但是，有一個jQuery plugin for this。

來源

2012-02-14 19:04:47

Usin g現在過渡，感謝長途旅行的建議:) – 2012-02-14 19:11:15

@DennyMueller，CSS 3？ – 2012-02-14 19:27:17

是的，比java腳本輕鬆簡單 – 2012-02-14 20:16:20

對鏈接顏色的淡入淡出效果

回答

相關問題