2016-01-22 3 views
1

У меня есть ситуации, как это:Добавить класс Div после загрузки другого класса

<body class="site pace-done"> 
    <div class="container fade-in sppb-animated"> 
     bla bla bla 
    </div> 
</body> 

То, что я хочу сделать, это добавить «плавной sppb анимированных» классы Div после «темпа-сделаны класса появляются в классе тела. Пока класс «темпа» не отображается в классе тела, «fade-in sppb-animated» следует удалить. Как это JS/Jquery?

Буду благодарен за любую помощь в этом.

+0

'темп-сделал', что у вас есть в этом классе css? – Jai

+0

Привет, Джай! «step-done» появляется в классе body после того, как все элементы загружаются на страницу. Допустим, что есть класс под названием «темп-ход». У меня есть анимация на моей странице, и я хочу, чтобы они начинались после появления класса «темпа», а не раньше. Это моя страница: http://manx.bdl.pl/eventart/ – manx

ответ

0

Я предполагаю, что вы помещаете класс в тело на основе какой-либо логики, присутствующей на сервере (иначе это бесполезно, а скорее вы должны использовать селектор css).

так что вы можете сделать некоторые, как я сделал в этом примере https://jsbin.com/fidolexaja/edit?html,js,console,output

0

Вы можете использовать $(window).load() событие, которое стреляет после загрузки всего содержимого.

$(window).load(function() { 
    $('.container').addClass('fade-in sppb-animated'); 
}); 
0

создать функцию, которая добавит класс

$(document).on('addClass',function(){ 
// add class 
} 
); 

добавить функцию, которая будет удалить класс

$(document).on('removeClass',function(){ 
// remove class 
} 
); 

Теперь вы можете бросить событие, чтобы сказать, когда добавление/удалить класс

$(document).trigger('addClass'); // to addClass 
$(document).trigger('removeClass'); // to removeClass 
0

База данных d на то, что вы просили, я создал скрипт, который будет проверять, имеет ли тело обновление для класса, если тело имеет класс, выполненный по шагам, он обновит контейнер и добавит класс fade-in. это использует setinterval и проверяет каждый 1 второй

$(document).ready(function(){ 
    $('.add').click(function(){ 
    $('body').addClass('pace-done'); 
    }); 

    $('.remove').click(function(){ 
    $('body').removeClass('pace-done'); 
    }); 

    setInterval(function(){ 
    if ($("body").hasClass("pace-done")) { 
     $('.container').addClass('fade-in'); 
    }else{ 
     $('.container').removeClass('fade-in'); 
    } 
    },1000); 
}); 

http://codepen.io/ZetCoby/pen/mVXJQK

также я предлагаю вам обновить контейнер DIV одновременно с телом, у вас есть какие-то Дж.С., что делает что-то для тела ? или вы используете некоторые внешние плагины, которые изменяют тело?

Смежные вопросы