Change CSS using JQuery AFTER animation is done

Question

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.

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.

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 3rd line of the code) right after the animation (on the 2nd line) finishes.

Many thanks ...

Answer 1

Instead of chaining them after the .animate call, put those .css calls into .animate's complete callback. Also, you can shorten your solution by passing an object of key/value pairs to .css.

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

Additionally, it is less verbose and more manageable to apply your CSS using .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 callback of animate():

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

    break;