jQuery change css attribute slowly

Question

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.

possibly even [animate()](http://api.jquery.com/animate/) it? — Alastair Pitts, Aug 05 '11 at 03:16

score 31 · Accepted Answer · answered Aug 05 '11 at 03:46

31

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

answered Aug 05 '11 at 03:46

awesomesyntax

588
5
12

2

this works perfectly for high-end browsers. but IE doesn't recognize it, so jQuery is better for this I think – Grigor Aug 05 '11 at 15:18
thats true, I don't get the point of them trying to advance, I mean firefox and chrome + some others lead the business – Grigor Aug 05 '11 at 16:57

Paul · Answer 2 · 2013-07-14T18:03:14.667

25

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

edited Jul 14 '13 at 18:03

answered Aug 05 '11 at 03:20

Paul

139,544
27
275
264

1

@Lucio Thank you for informing me. The latest versions of the color plugin are compatible with jQuery 2. I updated the link and answer. – Paul Jul 14 '13 at 18:04
This is perfect, especially for style switching. – Venugopal M Aug 27 '14 at 07:14

score 1 · Answer 3 · answered Mar 03 '18 at 10:08

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

jQuery change css attribute slowly

3 Answers3

Linked