javascript - 重置回调,以便每次用户滚动到 fullPage.js 中的某个部分时都会触发回调

标签 javascript jquery fullpage.js

我对某些部分评论了淡出,但在第二次滚动后无法让它们重新出现,而且我对 JavaScript 的了解不够深,无法找到正确的解决方案。我该怎么做呢?

  $(document.body).fadeIn(1000);
  $(document).ready(function() {

      'use strict';

      // variables
      var $isH1First   = $('.first .is-animated h1'),
          $ispFirst    = $('.first .is-animated p'),
          $isH1Second  = $('.second .is-animated h1'),
          $ispSecond   = $('.second .is-animated p'),
          $isH1Third   = $('.third .is-animated h1'),
          $ispThird    = $('.third .is-animated p');

      // initialize fullPage
      $('#fullpage').fullpage({

     //   navigation: true,
          scrollingSpeed: 1400,
          resetSliders:true,
          fitToSectionDelay: 1000,

        afterLoad: function(index, nextIndex) {
         if( nextIndex === 1 ) { 
              $isH1First.addClass('animated fadeInLeft').css('animation-delay', '.05s'); 
              $ispFirst.addClass('animated fadeInLeft').css('animation-delay', '.45s'); 
            }
         },
        onLeave: function(index, nextIndex) {
          // first animation
          if( nextIndex === 2) { 
      //      $isH1First.addClass('animated fadeOutUp'); 
      //      $ispFirst.addClass('animated fadeOutUp');
            $isH1Second.addClass('animated fadeInDown').css('animation-delay', '.45s'); 
            $ispSecond.addClass('animated fadeInDown').css('animation-delay', '.85s'); 
          }
          // second animation
          else if( nextIndex === 3 ) {
      //      $isH1Second.addClass('animated fadeOutUp'); 
      //      $ispSecond.addClass('animated fadeOutUp');
            $isH1Third.addClass('animated bounceInDown').css('animation-delay', '.45s'); 
            $ispThird.addClass('animated flipInX').css('animation-delay', '.85s'); 
          }
        }
      });
    });

最佳答案

我知道这已经很晚了,我使用velocity.js 来获得漂亮的动画,并且我只想显示动画一次,而不是每次加载该部分时都显示动画。

如果我理解正确,那么您正在尝试实现相反的目标,这对我来说是默认行为。

我的代码的一个小例子:

if (index === 1) {
        //slide 1 animation
        if (!$jq(".refine").is(":visible")
        {
            $jq(".refine").velocity("fadeIn", {duration: 2000});
        }
    }

关于javascript - 重置回调,以便每次用户滚动到 fullPage.js 中的某个部分时都会触发回调,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41749350/

相关文章:

javascript - 如何在滚动事件发生之前为元素设置动画?

javascript - 在 javascript 对象上计算相似的属性

javascript - 找不到我从 Typescript 构建的 javascript 类

javascript - 暂停脚本直到函数完成 - jquery

javascript - 使用 jQuery 管理 HTML 列表项

javascript - Scrollmagic .to() 不适用于 Wordpress 中的整页

javascript - 定位位置: fixed elements correctly after pinch zoom

javascript - 通过 onclick 函数传递时,包含字符串的变量为空

javascript - 引导按钮到新页面

javascript - 隐藏页面上的部分/幻灯片箭头 - Fullpage.js