與淡入淡出效果

Question

菜單懸停我有這樣的菜單結構：

http://jsfiddle.net/Rochefort/szL2C/

一切正常。但我想，通過jQuery懸停效果淡入淡出。我怎樣才能做到這一點？

Answer 1

你需要爲這個只有幾行代碼jquery color animations plugin：

$('.links yan-menu li a ').hover(function() { 
    $(this).animate({ backgroundColor: "#002C6A" }, 'fast'); 
}, 
function() { 
    $(this).animate({ backgroundColor: "#ffffff" }, 'fast'); 
}); 

當然，你將需要刪除的CSS代碼的正確的代碼添加到頁面

Answer 2

您可以轉換使用CSS3實現這一點，就像這樣：

.menu-item 
{ 
    // In the transition you define the property that 
    // you want a transition attached to and the duration 
    transition: background .5s; 
    -moz-transition: background .5s; /* Firefox 4 */ 
    -webkit-transition: background .5s; /* Safari and Chrome */ 
    -o-transition: background .5s; /* Opera */ 
} 

.menu-item:hover 
{ 
    background: #CCC; // Or whatever color you choose 
} 

來源：http://www.w3schools.com/css3/css3_transitions.asp

編輯

jQuery的解決問題的方法是：

$(document).ready(function(){ 
    $('#right_menu li').hover(function() { 
     $(this).animate({ backgroundColor: "#002C6A" }, 'fast'); 
    }, 
    function() { 
     $(this).animate({ backgroundColor: "#ffffff" }, 'fast'); 
    }); 
}); 

但是，您需要包含發現的的jQuery顏色庫。還需要刪除在CSS中設置的懸停背景顏色。

希望這會有所幫助。

Answer 3

燕坤說，你必須包括jQuery顏色動畫庫：http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js

我改進了代碼插入。 stop()句子，以避免在鼠標結束幾次時出現循環。

$('.links yan-menu li a ').hover(function() { 
    $(this).stop(); 
    $(this).animate({ backgroundColor: "#002C6A" }, 'fast'); 
}, 
function() { 
    $(this).stop(); 
    $(this).animate({ backgroundColor: "#ffffff" }, 'fast'); 
});