web-dev-qa-db-ja.com

jQueryはcss属性をゆっくりと変更します

私はこのコードを持っています

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

リンクの背景色を変更しますが、フェード効果のようにゆっくりと変更したいのですが、この場合は。

javascriptjqueryhtmlcssfade
23
Grigor

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;
}
31
awesomesyntax

animate() を使用したいが、 Color Plugin for jQuery も必要です。

Colorプラグインが含まれていると、次のコードがうまく機能します。

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

この質問に答えるのは非常に遅いかもしれませんが、それでも私のために機能する代替ソリューションを提供したかったのです。 （以前に提供された答えはどちらも機能します）。私はCSSアニメーションを使用しましたが、他のいくつかのケースでも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;}
}
0
Sujoy