Question

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

我的网站标题（＆＃34; Blocks＆＃34;）显示在首页中心的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));
            }
        }
    }

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

我在这里做错了什么？

Answer 1

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

<强> AfterRender阶段（）

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

还建议in fullPage.js FAQs：

使用fullPage.js时我的其他插件无法正常工作

简短回答：在“后续”版本中初始化它们＆＃39; fullPage.js的回调。

说明：如果您使用的是＆＃39; verticalCentered：true＆＃39;或者＆＃39; overflowScroll：true＆＃39;对于fullPage.js，您的内容将被包装在其他元素中，从而改变其在站点的DOM结构中的位置。这样，您的内容将被视为＆＃34;动态添加的内容＆＃34;并且大多数插件需要最初在网站上执行任务的内容。如果你使用afterRender回调来初始化你的插件，那么这些元素将不再受到DOM结构的任何修改的影响，并且将被认为最初用于你想要从现在开始使用的插件。

setTimeout无法使用bounce.js和fullpage.js

1 个答案: