Как запустить функцию JQuery после того, как я добавил CSS

Question

У меня есть эта строка:

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

и я хотел бы, чтобы остальная часть javascript работала ПОСЛЕ того, как этот стиль был добавлен. В настоящее время я использую таймер

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

Но каким-то образом CSS добавляется при выполнении таймера, а не до него. Есть идеи, почему это происходит? если нет, есть ли способ заставить функцию тайм-аута работать после добавления css

Answer 1

Можете ли вы объявить setTimeout вне loadPage, а затем вызвать его в document.ready?

Answer 2

Нашли ответ, ребята! я был не проблемой jquery, а трюком css3.

Чтобы сделать анимацию, непрозрачность элемента должна быть установлена ​​на 1. Это произошло после этой 1-секундной задержки. Я не понял связь между 2, но теперь я делаю. Так что я просто изменил это:

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

Я просто добавляю непрозрачность: 1 к CSS, который ранее был равен 0, чтобы переход начался.

Извините за головную боль и все равно спасибо:)

Answer 3

Сделать первый код выполненным в его собственной функции и дать ему функцию обратного вызова

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

Тогда назовите это так:

addStyle(function(){

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

});