Change CSS using JQuery AFTER animation is done 
<p>Can anyone help me solve this little problem with JQuery. I have a div that i keep on changing the margin of it when the mouse hovers over tabs, I also want the color of those tabs to change when the mouse gets over them. </p>

<p>The function is working perfectly fine, but there is one little issue I have, the color of the tab is changing as soon as I get the mouse over it while I want the animation to finish then change the tab.</p>

<p>Here is the code I'm using:</p>

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

<p>I want the color to change (on the 3rd line of the code) right after the animation (on the 2nd line) finishes.</p>

<p>Many thanks ...</p>
