Changing CSS with jQuery AFTER Animation

Question

Can someone help me solve this little problem using jQuery. I have a div that I keep changing it when the mouse hovers over the tabs, I also want the color of these tabs to change when the mouse goes over them.

The function works fine, but there is one small problem that I have, the color of the tab changes as soon as I hover over it while I want the animation to end, and then change the tab.

Here is the code I'm using:

case 'cat4' : $('#bg').stop(); $('#bg').animate({'marginLeft': '255px'}, 500); $(this).css('color', '#7f3f97'); $('#bg').css('background-image', 'url(images/3.jpg)'); break; 

I want the color to change (on the third line of code) immediately after the end of the animation (on the second line).

Thank you very much...

Answer 1

Instead of linking them after a .animate call, put these .css calls in the .animate full callback . In addition, you can shorten your decision by passing the key / value pair object in .css .

 $('#bg').stop().animate({ 'marginLeft': '255px' }, 500, function() { $(this).css({color: '#7f3f97', backgroundImage: 'url(images/3.jpg)'}); }); 

Also, less complex and more manageable is applying your CSS with .addClass :

 .newClass{ color: '#7f3f97'; backgroundImage: 'url(images/3.jpg)' } $('#bg').stop().animate({ 'marginLeft': '255px' }, 500, function() { $(this).addClass("newClass"); }); 

Answer 2

You can use the animate() :

 case 'cat4': $('#bg').stop().animate({'marginLeft': '255px'}, 500, function(){ $(this).css({ color:'#7f3f97', backgroundImage:'url(images/3.jpg)' }); }); break;