setTimeout不适用于bounce.js和fullpage.js

Question

我在一个虚拟网站上工作。我想尝试建立一个页面占满整个屏幕的网站，就像Tumblr的主页一样。

我的网站的标题(“区块”)显示在6个彩色区块横跨首页部分的中心，每个字母占据自己的彩色区块。每当你向下滚动到另一个页面部分并返回到第一个页面部分时，我希望彩色块以100ms的间隔开始它们的动画。

这是我的jQuery：

$(document).ready(function() {

var titleBlock1 = $(".titleBlock1");
    titleBlock2 = $(".titleBlock2");
    titleBlock3 = $(".titleBlock3");
    titleBlock4 = $(".titleBlock4");
    titleBlock5 = $(".titleBlock5");
    titleBlock6 = $(".titleBlock6");
    siteTitleLetter = $('.site-title-letter');
    bounce = new Bounce();

bounce.scale({
    from: { x: 0.1, y: 0.1 },
    to: { x: 1, y: 1 },
    duration: 1500,
    bounces: 5,
});


$('#fullpage').fullpage({
    sectionsColor: ['#56BC8A', '#A77DC2', '#36465D', '#F2992E'],
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#menu',
    resize: false,

    afterLoad: function(anchorLink, index){
        //using index
        if(index == 1){
            for (var x = 1; x < 7; x++) {
                var delayTime = x * 100;

                setTimeout(function() {
                    console.log(x);
                    bounce.applyTo($('.titleBlock' + x));
                }, x*100);                  
            }
        }
    }
});

});

我已经使用bounce.js创建了一个弹跳动画，每当fullPage.js检测到其中一个页面部分已加载时，我都会尝试激活它。

我的问题是:为什么setTimeout函数不工作？每当我通过向上滚动到首页部分来测试这一点时，它都会告诉我它不能对未定义的元素应用退回。但是，当我删除setTimeout并尝试执行以下操作时：

afterLoad: function(anchorLink, index){
        //using index
        if(index == 1){
            for (var x = 1; x < 7; x++) {
                var delayTime = x * 100;

                bounce.applyTo($('.titleBlock' + x));
            }
        }
    }

它工作得很好，只是它当然不包括我想要的延迟。

我在这里做错了什么？

Answer 1

听起来您使用的是默认选项verticalCentered:true，因此您的部分中的元素将由插件包装。您将需要按照fullPage.js docs中的建议在回调afterRender中使用委托或javascript

afterRender()

此回调在页面结构生成后立即触发。这是您希望用来初始化其他插件或触发任何需要准备好文档的代码的回调(因为此插件修改DOM以创建结果结构)。

还建议使用in fullPage.js FAQs

使用fullPage.js时，

我的其他插件不起作用

简短回答：在fullPage.js的'afterRender‘回调中初始化它们。

Explanation:如果您使用诸如fullPage.js的'verticalCentered:true‘或'overflowScroll:true’这样的选项，您的内容将被包装在其他元素中，从而改变其在站点的DOM结构中的位置。这样，您的内容将被视为“动态添加的内容”，并且大多数插件需要内容最初位于网站上才能执行其任务。如果您使用afterRender回调来初始化您的插件，那么这些元素将不再受到DOM结构中任何修改的影响，并且将被认为是从现在开始您想要使用的插件的原始位置。