Не удалось удалить и добавить класс с помощью fullpage.js

Я использую animate.js и fullpage.js. Моя цель - добавить $ ( '#fullpage' ). fullpage ({ afterLoad : function ( anchorLink , index ) { $ ( '.text' ). addClass ( 'animated slideInLeft' ); }, onLeave : function ( index , nextIndex , direction ) { $ ( '.text' ). removeClass ( 'animated slideInLeft' ); $ ( '.text' ). addClass ( 'animated slideOutLeft' ); } }); анимация при прокрутке в сторону от раздела и добавление анимации slideInLeft при посещении раздела.

Мой текущий код удаляет слайд в анимации и применяет анимацию слайда, но никогда не повторяет слайд в анимации.

#first {
  background-color: yellow;
}
#second {
  background-color: blue;
}
.height {
height: 100vh;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/jquery.fullPage.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/jquery.fullPage.css" rel="stylesheet" />

<div id="fullpage">

  <div class="section height" id="first">
      <h2 class="text">Something1</h2>
  </div>

  <div class="section height" id="second">
     <h2 class="text">Something2.</h2>
    
  </div>
  <div class="section height" id="third">
    <h2 class="text">Something else </h2>
  </div>

</div>
onLeave

javascript,jquery,fullpage.js,

1

Ответов: 1

1 принят

Для slideOutLeft, вы должны использовать уходящий раздел , чтобы найти текст и применить onLeaveин slideOutLeft. Также помните, что удалите текст, slideOutLeftв afterLoadкотором текст может вывести его снова.

$('#fullpage').fullpage({
  afterLoad: function(anchorLink, index) {
    $(this).find('.text').removeClass('animated slideOutLeft');
    $(this).find(".text").css("display","block");
    $(this).find('.text').addClass('animated slideInLeft');
  },
  onLeave: function(index, nextIndex, direction) {
    var leavingSection = $(this);
    $(leavingSection).find(".text").removeClass('animated slideInLeft');  

    $(leavingSection).find(".text").addClass('animated slideOutLeft');  
    }

});

Вот пример: https://jsfiddle.net/39gadbnv/1/

JavaScript, JQuery, fullpage.js,
Похожие вопросы
Яндекс.Метрика