web-dev-qa-db-fra.com

jQuery change l'attribut css lentement

J'ai ce code

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

cela change la couleur de fond du lien, mais je veux le changer lentement, un peu comme un effet de fondu, mais dans ce cas.

javascriptjqueryhtmlcssfade
20
Grigor

Vous pouvez accomplir la même chose avec les transitions CSS3. Le résultat sera presque le même.

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

Vous voulez utiliser animate() , mais vous avez également besoin du plugin Color pour jQuery .

Avec le plugin de couleur inclus, le code suivant fonctionne bien:

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

Peut-être qu'il est très tard pour répondre à cette question, mais je voulais tout de même fournir une solution alternative qui fonctionnait pour moi. (Les deux réponses fournies précédemment fonctionneront). J'ai utilisé CSS Animation et cela fonctionnait mieux pour moi que jQuery animate dans quelques autres cas également. Vous pouvez essayer le ci-dessous - 

// 'bcolor' est le nom de l'image clé d'animation défini ultérieurement

#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