Question

我正在使用插件fullpage.js并且我想在页面中的特定点调用一个函数 - 即，不允许向下滚动直到该函数为新元素设置动画，然后再次允许滚动一次动画完成了。如果它是第一部分，我该如何使用＆＃34; onload＆＃34;？我不知道如何构建它。

这是插件的创建者在github上告诉我的内容：＆＃34;你可以在想要粘贴的部分的onLoad回调上使用setAllowScrolling（false），然后加载你的内容或你的动画，然后使用setAllowScrolling （真）再次。＆＃34;以下是我的问题，我在Github上请求编码帮助，我现在意识到这不是正确的地方......

https://github.com/alvarotrigo/fullPage.js/issues/801

他所说的对我来说在逻辑上是完全合理的，但是我不确定从哪里开始并且时间不够，所以任何有关如何构建它的帮助对我来说意味着世界。

我想为＆＃34; uk-flag＆＃34;制作动画。在用户进入第二部分之前的元素：

<div class="section" id="section-one">
  <div class="uk-flag"></div>
</div>
<div class="section" id="section-two">
  <h1>Heading</h1>
  <p>Hi</p>
</div>

编辑：这是一个稍微不正常的jsfiddle我刚刚掀起......

Answer 1

为了实现您的期望，您应该使用setTimeout() javascript函数使用setTimeout()回调，您可以在延迟后执行任何您想要的操作例如，您可以使用setAllowScrolling(false)禁用鼠标滚动，并在动画完成后使用moveSectionDown()移至下一部分。

例如：

$(document).ready(function() {
    // on page load
    $('#uk-flag').animate({'opacity':'1'}, 5000);

    $('#fullpage').fullpage({

        // options
        verticalCentered: false,
        scrollingSpeed: 850,
        onLeave: function(index, nextIndex, direction) {

            // after leaving Introduction
            if(index == 1 && direction == 'down') {

                // disable mouse scroll
                $.fn.fullpage.setAllowScrolling(false);
                // animation section2
                $('#fr-flag').animate({'opacity':'1'}, 5000);
                // reset section1 flag
                $('#uk-flag').animate({'opacity':'0'}, 0);

                // wait 5sec and go section3
                setTimeout(function() {
                    // move section down
                    $.fn.fullpage.moveSectionDown();
                    // enable mouse scroll
                    $.fn.fullpage.setAllowScrolling(true);
                    // animation section3
                    $('#de-flag').animate({'opacity':'1'}, 5000);
                    // reset section2 flag
                    $('#fr-flag').animate({'opacity':'0'}, 0);
                }, 5000);
            }
        }
    }); 
});

查看此JSBin以获取完整示例。

编辑（2014-11-16）：

使用afterRender事件，您可以在页面加载后立即执行所需操作。

$(document).ready(function() {
    $('#fullpage').fullpage({

        // options
        verticalCentered: false,
        scrollingSpeed: 850,
        afterRender: function(anchorLink, index) {
          // disable mouse scroll
          $.fn.fullpage.setAllowScrolling(false);
          // animation section1
          $('#uk-flag').animate({'opacity':'1'}, 5000);

          // wait 5sec and go section2
          setTimeout(function() {
            // move section down
            $.fn.fullpage.moveSectionDown();
            // enable mouse scroll
            $.fn.fullpage.setAllowScrolling(true);
            // animation section2
            $('#fr-flag').animate({'opacity':'1'}, 5000);
            // reset section1 flag
            $('#uk-flag').animate({'opacity':'0'}, 0);
          }, 5000);
        },
        onLeave: function(index, nextIndex, direction) {

            // after leaving Introduction
            if(index == 1 && direction == 'down') {

                // disable mouse scroll
                $.fn.fullpage.setAllowScrolling(false);
                // animation section2
                $('#fr-flag').animate({'opacity':'1'}, 5000);
                // reset section1 flag
                $('#uk-flag').animate({'opacity':'0'}, 0);

                // wait 5sec and go section3
                setTimeout(function() {
                  // move section down
                  $.fn.fullpage.moveSectionDown();
                  // enable mouse scroll
                  $.fn.fullpage.setAllowScrolling(true);
                  // animation section3
                  $('#de-flag').animate({'opacity':'1'}, 5000);
                  // reset section2 flag
                  $('#fr-flag').animate({'opacity':'0'}, 0);
                }, 5000);
            }
        }
    });
});

检查其他JSBin以查看其实际效果。

一旦用户滚动到某个页面锚点，我该如何调用函数？

1 个答案: