jQuery를 변경 CSS 속성은 천천히

Question

이 코드

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

는 링크의 배경색을 변경을 가지고,하지만 난 그게 좀 페이드 효과처럼 천천히 변경하려면,하지만.

Answer 1

당신은 CSS3 전환과 같은 일을 수행 할 수 있습니다. 결과는 거의 동일합니다.

#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

animate()을 사용하고 싶지만 Color Plugin for jQuery도 필요합니다. 포함 된 색상 플러그인으로

, 다음 코드는 잘 작동 :

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

Answer 3

이 질문에 답하는 것은 매우 늦을 수 있지만 여전히 저에게 도움이되는 대체 솔루션을 제공하고 싶습니다. (앞에서 제공 한 답변이 모두 효과가 있습니다). 저는 CSS Animation을 사용했는데 jquery animate보다 나에게 더 좋은 결과를 얻었습니다. 당신은 아래에 시도 할 수 있습니다 -

// 'bcolor은'나중에 정의 된 애니메이션 키 프레임 이름입니다

#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;} 
}