jQuery change css attribute slowly
I have this code
$('#uiAdminPanelMenu li a').hover( function(){
$(this).css('background-color', '#D3E1FA';
},
function(){
$(this).css('background-color', '#F4F4F4');
});
it changes the background color of the link, but I want it to change it slowly, kinda like fade effect, but for this case.
You can accomplish the same thing with CSS3 transitions. The result will almost be the exact same.
#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;
}
You want to use animate(), but you also need the Color Plugin for jQuery.
With the color plugin included, the following code works well:
$('#uiAdminPanelMenu li a').hover( function(){
$(this).animate({'background-color': '#D3E1FA'}, 'slow');
},
function(){
$(this).animate({'background-color': '#F4F4F4'}, 'slow');
});
May be its very late for answering this question, but still wanted to provide an alternate solution that worked for me. (Both the answers provided earlier will work).
I used CSS Animation and that worked better for me than jquery animate in few other cases as well.
You can try the below –
// ‘bcolor’ is animation keyframe name defined later
#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;}
}
The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
