如何使用jQuery從CSS獲取顏色屬性？

我想爲所有鏈接的顏色變化添加動畫。我的意思是，沒有任何Javascript，當一個鏈接懸停時，它的顏色會立即改變。我想要做的是，當你懸停一個鏈接時，它的顏色應該與jQuery的$ .animate函數一步一步地改變。如何使用jQuery從CSS獲取顏色屬性？

在這裏很容易做到。但事情是，我不想爲每種鏈接類型編寫RGB代碼。我希望jQuery知道鏈接懸停時鏈接的顏色。

如果你不理解我，直到這裏，讓我用一個例子解釋：

 

    $('a').hover(function() { 
     $(this).animate({ 'color', $(this + ':hover').css('color') }, { duration: 250 }); 
    }, function() { 
     $(this).animate({ 'color', $(this).css('color') }, { duration: 250 }); 
    });

我知道這個代碼將無法正常工作，但我認爲這說明了什麼，我需要明確。

來源

2012-03-18 Hkan

您是否考慮過css3過渡效果？這將是更容易和更高效的方式來做這種效果。 – algi 2012-03-18 18:48:05

CSS3轉換真的是您嘗試實現的效果的方式。瀏覽器的支持並不是很好，但它變得越來越好，即使你找到了一個可以幫助這種效果的jQuery插件，它可能會被放棄，而且確實很麻煩。 – Dropped43 2012-03-18 19:01:52

我嘗試過CSS3轉換。但它在IE中不受支持。我的設計必須支持IE。所以我不能使用它。不管怎麼說，還是要謝謝你。 – Hkan 2012-03-19 20:55:40

我會用CSS3過渡：如果你想用jQuery做 http://jsfiddle.net/wsZKQ/1/

a{ 
    -moz-transition:all 0.25s; 
    -webkit-transition:all 0.25s; 
    transition:all 0.25s; 
    color:black; 
} 
a:hover{ 
    color:red; 
}

，你需要一個插件來訪問:hover -styles： http://archive.plugins.jquery.com/project/moreSelectors

我不認爲有一種方法可以在沒有插件的情況下訪問:hover樣式。

來源

2012-03-18 18:54:24 Alex

var color = $('element').css('color');

如果您通過rgb（紅色，綠色，藍色）等RGB樣式設置，則不必執行十六進制變換。你可以很容易地從0-255改變顏色。

我用RGB做了類似的事情看看http://www.homeschoolsnowboarding.com要耐心等待，慢慢看背景顏色。

來源

2012-03-18 19:08:44

如何使用jQuery從CSS獲取顏色屬性？

回答

相關問題