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 ...

karim79 · Accepted Answer · 2011-04-19 01:11:42Z

15

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

edited Apr 19, 2011 at 1:11

answered Jan 24, 2011 at 14:34

karim79

343k67 gold badges420 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Justin Niessner · Accepted Answer · 2011-01-24 14:47:12Z

4

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;

edited Jan 24, 2011 at 14:47

answered Jan 24, 2011 at 14:34

Justin Niessner

246k40 gold badges416 silver badges546 bronze badges

2 Comments

Mark Robinson Over a year ago

Do you need the var capturedThis = $(this); line? Can't you just use $(this).css(...) in the function?

Justin Niessner Over a year ago

@Mark - The OP mixed the use of $(this) and $('#bg') so I wasn't sure what they were expecting this to be. Either way, it is removed already.

Collectives™ on Stack Overflow

Change CSS using JQuery AFTER animation is done

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related