Если вы предпочитаете посмотреть на работающий сайт, на котором существует проблема, см. раздел «Учетные данные» (я анимирую содержимое под блоком синего цвета «#star»):
http://176.32.230.17/apptivation.co.uk/m/home/
у меня два плагина
- :onscreen для воспроизведения анимации, когда целевой DIV отображается в области просмотра.
- Полноэкранный переворот, чтобы создать книжный эффект между разделы
Второй плагин ожидает следующую структуру разделов на одной странице, чтобы он работал:
<div class="bb-item">
<div class="content">
<div class="scroller">
<!-- this is the div i want to animate -->
<div id="star" class="inner-pad">
some content
</div>
</div>
</div>
</div>
Я инициализирую экранный плагин следующим образом:
$(function() {
setInterval(function() {
$("#star").filter(":onScreen").addClass('animated bounceInRight');
}, 0)
})
Если бы приведенный выше код был первым разделом, мой div «#star» успешно добавил бы имена классов именно так, как предполагалось на экране (плагин 1). Однако, если бы я переместил этот код в пятый раздел (например), на экране были бы добавлены имена классов еще до того, как я доберусь до (видимого) этого раздела. Именно здесь я думаю, что плагин 2 влияет на плагин 1, заставляя плагин 1 думать, что div на самом деле виден, когда это не так.
Как я могу убедиться, что экранный плагин выполняет свою работу и добавляет имена классов только тогда, когда я ТОЛЬКО в определенном разделе?
Я пытался удалить имена классов 'animated bounceInRight' перед инициализацией экранного плагина, но это не сработало. В этом файле скрипта (плагина 2) он уничтожает некоторые элементы и повторно инициализируется, когда начинается перелистывание страницы, Могу ли я сделать то же самое с экранным? Как я могу это сделать?
