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

【问题标题】：setTimeout not working with bounce.js and fullpage.jssetTimeout 不适用于bounce.js 和 fullpage.js
【发布时间】：2014-12-08 02:51:27
【问题描述】：

我正在开发一个虚拟网站。我想在一个占据整个屏幕的全尺寸页面部分的网站上尝试一下，比如Tumblr 的主页。

我的网站标题（“块”）显示在首页部分中心的 6 个彩色块中，每个字母占据自己的彩色块。每当您向下滚动到另一个页面部分并返回到第一个部分时，我希望彩色块以它们之间的 100 毫秒开始动画。

这是我的 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));
            }
        }
    }

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

我在这里做错了什么？

【问题讨论】：

（我猜）你需要使用闭包：brackets.clementng.me/post/24150213014/…
尝试 setTimeout(function() { .. }, (parseInt(x)*100));
谢谢你们的帮助，伙计们。遗憾的是，这些选项都不起作用。

标签： jquery fullpage.js

【解决方案1】：

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

afterRender()

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

还建议in fullPage.js FAQs:

我的其他插件在使用 fullPage.js 时不起作用

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

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

【讨论】：