jQuery thay đổi css thuộc tính chậm

Question

tôi có mã này

$('#uiAdminPanelMenu li a').hover(function(){ 
    $(this).css('background-color', '#D3E1FA'; 
}, 
function(){ 
    $(this).css('background-color', '#F4F4F4'); 
}); 

nó thay đổi màu nền của các liên kết, nhưng tôi muốn nó để thay đổi nó từ từ, kinda giống như hiệu ứng mờ dần, nhưng đối với trường hợp này.

Answer 1

Bạn có thể thực hiện điều tương tự với hiệu ứng chuyển tiếp CSS3. Kết quả sẽ gần như giống hệt nhau.

#uiAdminPanelMenu li a { 
    background-color: F4F4F4; 
    -webkit-transition: background-color 0.4s ease; 
    -moz-transition: background-color 0.4s ease; 
    -o-transition: background-color 0.4s ease; 
    transition: background-color 0.4s ease; 
} 

#uiAdminPanelMenu li a:hover { 
    background-color: D3E1FA; 
} 

Answer 2

Bạn muốn sử dụng animate(), nhưng bạn cũng cần Color Plugin for jQuery.

Với plugin màu được đưa vào, đoạn code sau hoạt động tốt:

$('#uiAdminPanelMenu li a').hover(function(){ 
    $(this).animate({'background-color': '#D3E1FA'}, 'slow'); 
}, 
function(){ 
    $(this).animate({'background-color': '#F4F4F4'}, 'slow'); 
}); 

Answer 3

Có thể rất muộn để trả lời câu hỏi này, nhưng vẫn muốn cung cấp giải pháp thay thế phù hợp với tôi. (Cả hai câu trả lời được cung cấp trước đó sẽ hoạt động). Tôi đã sử dụng CSS Animation và hoạt động tốt hơn cho tôi so với jquery animate trong vài trường hợp khác. Bạn có thể thử dưới đây -

// 'bcolor' là phim hoạt hình tên keyframe định nghĩa sau

#uiAdminPanelMenu li a:hover { 
    -webkit-animation-name: bcolor; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-fill-mode: forwards; 
    -moz-animation-name: bcolor; 
    -moz-animation-duration: 1s; 
    -moz-animation-fill-mode: forwards; 
    animation-name: bcolor; 
    animation-duration: 1s;  
    animation-fill-mode: forwards; 
} 

@-webkit-keyframes shadeOn { 
    from {background-color: #F4F4F4;} 
    to {background-color: #D3E1FA;} 
} 
@-moz-keyframes shadeOn { 
    from {background-color: #F4F4F4;} 
    to {background-color: #D3E1FA;} 
} 
@keyframes shadeOn { 
    from {background-color: #F4F4F4;} 
    to {background-color: #D3E1FA;} 
}