用jQuery自動動畫所有懸停狀態

在我的新網站上，我有幾個不同的鏈接懸停狀態。一個交換了一個背景圖像的徽標。一個用於替換主導航的不同背景圖像。普通的內聯鏈接通過CSS改變背景顏色。我找不到一種方法可以自動將所有a標籤正常地動態設置爲懸停狀態。用jQuery自動動畫所有懸停狀態

爲每種鏈接類型手動編寫動畫方法似乎並不十分乾淨（或面向未來）。將我的背景圖像URL和鏈接顏色（應該在CSS中）放到JS中似乎不太合適。對於懸停效果的每個實例創建一個特殊的類似乎不正確，然後在可以使用CSS提供的默認a：hover行爲的方式時，通過jQuery爲該類的添加/刪除創建動畫。

所以我只是想知道是否有辦法讓jQuery的（有或沒有的jQuery UI）的一個和一間交叉衰減：即徘徊在我的CSS已經定義狀態。所有a：懸停狀態都按預期工作，但轉換過於突然，我想在每個元素的懸停/非懸停狀態之間添加淡入轉換。

有什麼建議嗎？這裏就是我想設置過渡動畫CSS懸停狀態的一個例子：

#logo a, #logo a:visited { 
background: url('logo_black.png'); 
} 
#logo a:hover { 
background: url('logo_white.png'); 
}

來源

2010-09-06 Arne Stephensson

真正的方式做，這是CSS轉換（https://developer.mozilla.org/en/CSS/CSS_transitions），它允許瀏覽器處理兩者之間的所有動畫爲你指定狀態。

但是，除了Webkit以外，任何瀏覽器都不支持這些瀏覽器（儘管它們是針對Firefox 4的）。

如果你想讓他們在其他瀏覽器，你可以考慮使用一個jQuery插件，如工作：http://www.azarask.in/blog/post/animation-css-transitions-jquery-easy/

就個人而言，我建議在JavaScript中不執行他們的一切，讓那不瀏覽器支持轉換優雅地降級。雖然你今天不會有很棒的瀏覽器支持，但你會隨着時間的推移，而且絕對沒有額外的努力。

漸進增強是Web開發人員的最好的朋友。特別是在這個時代，每週都有新技術，新設備和新瀏覽器出現。

來源

2010-09-06 17:03:33

是的，但我想今天的動畫效果。CSS轉換可能是一種漸進式增強，但我可以用JS做同樣的事情，並且比Mozilla用戶的用戶更多。感謝您的信息，但我並不知道CSS轉換。看起來很挑剔。在CSS中的動畫代碼。似乎很麻煩，因爲我不想將十六進制代碼放入我的JS中。 – 2010-09-06 20:29:40

我結束了這樣的打算：

$('#logo, #left_nav li').css({ opacity: 0.6 }); 

$('#logo, #left_nav li').hover(function(){ 
    $(this).stop().animate(); 
    $(this).animate({ opacity: '0.99'}, 250);  
    },function(){ 
    $(this).stop().animate(); 
    $(this).animate({ opacity: '0.6'}, 250);   
});

的背景圖像上，這些元素是33％透明。

我將每個元素上的不透明度設置爲0.6（在document.ready上）以獲得20％的透明度。該徽標被修改爲相對於該值具有一定的不透明度。

在懸停時，我將不透明度設置爲完整值併爲更改設置動畫效果。標誌漸變爲100％不透明度，背景漸變爲33％不透明度。還有一些停止（）代碼在那裏，以防止不必要的影響鏈接。

我會爲內嵌文本鏈接添加類似內容。沒有足夠的代碼來打擾我，特別是如果沒有更清晰的方法在jQuery中的所有鏈接上獲得相同的效果。

來源

2010-09-06 21:30:24

用jQuery自動動畫所有懸停狀態

回答

相關問題