Как менять CSS элементов через jQery по очереди?

Question

[millwright]

Есть множество элементов, которые анимируются через CSS свойства при скролле.
Пытаюсь запретить одновременно анимировать больше одного элемента. Добавил переменную, которая меняет значение, когда анимация заканчивается (setTimeout = transition), и условие, но проблема в том, что функция вызывается каждый раз, когда происходит скролл. Выглядит это примерно так:

var scrolling = false;
if ($(window).scrollTop() > $(element).offset().top) {
  if (!scrolling) {
    scrolling = true;
    //CSS меняется
    setTimeout(function(){
      scrolling = false;
    }, 1000);
}

Есть ли способ выполнить функцию, привязанную к скроллу, только один раз, когда значение скролла превышает определённую величину, или другие способы менять CSS по очереди?

Comments

[Константин Громов]

Вам не нравится то, что функция вызывается на любую смену скролла или то, что она работает некорректно?

[Сергей]

mynameismatthieu.com/WOW не поможет случайно?

[millwright]

Константин Громов: после прокрутки до $(element).offset().top функция вызывается на каждый скролл, поэтому scrolling почти постоянно true, а из-за этого функция не срабатывает на следующих элементах

[millwright]

Сергей: это интересно, но не то, что мне нужно

[Константин Громов]

millwright: Тогда вы должны перебирать в функции все элементы (в порядке сверху вниз), которые принимают участие в процессе. Первому прошедшему проверку $(element).offset().top + $(element).outerHeight() > $(window).scrollTop() присваивайте нужный класс и убирайте этот класс у прошлого активного элемента, если он не был тем, который прошёл проверку сейчас.

[millwright]

Константин Громов: дело в том, что сайт с параллакс эффектами и сглаженным скроллом, и, когда элемент проходит проверку, всё ещё может быть виден предыдущий элемент, если резко прервать анимацию предыдущего, это будет заметно. Я пытался сделать так, что даже если элемент прошёл проверку по скроллу, его анимация не срабатывала бы, пока не закончится анимация предыдущего элемента. Если анимируется сразу несколько элементов, страдает производительность.

[Константин Громов]

millwright: Ситуация непростая получается, я бы помог будь целиком вся страница перед глазами. Так могу лишь сказать, что проще оптимизировать скрипты, чтобы 2 элемента могли без проблем выполнять анимацию параллельно. Ненормально, что такая мелочь тормозит браузер.