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アニメーションよりも優れていました。 あなたは以下試すことができます -

// '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;} 
}