How to run a jquery function after i added css

I have this line:

$('body>header:last a,body>header:last div,body>header:last h1').css("-webkit-transition", "opacity 0.5s ease-in");

and i would like the rest of the javascript to run AFTER that style gets added. I currently use a timer

setTimeout(function () {
                    $('body>header:not(:last),body>footer:not(:last),body>#content:not(:last)').remove();                   
                    $('body>header,body>footer,body>#content').removeAttr('style'); },1000);

But somehow the css gets ad开发者_Go百科ded when the timer executes and not before it. Any idea why this happens? if not is there a way to force the timeout function to run after adding the css

Make the first code run in it's own function and give it a callback function

function addStyle(callback)
{
    $('body>header:last a,body>header:last div,body>header:last h1').css("-webkit-transition", "opacity 0.5s ease-in");

    if (typeof callback !== 'undefined') callback();
}

Then call it like this:

addStyle(function(){

    // Do other stuff here after css is added...

});

Can you declare setTimeout outside of the loadPage and then call it within document.ready?

Found the answer guys! i was not a jquery problem but a css3 trick.

In order to do the animation, the opacity of the element had to be set to 1. That happened after that 1 second delay. I did not undserstand the link between the 2 but now i do. So what I did is just change this:

$('body>header:last a,body>header:last div,body>header:last h1').css({'-webkit-transition': 'opacity 0.5s ease-in','opacity':'1'});

I simple add opacity:1 to the css which was previously at 0 so that the transition starts.

Sorry for the headache and thanks anyway :)