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

我正在一个虚拟网站上工作。我想尝试一下带有整个屏幕的全尺寸页面部分的网站，例如Tumblr的主页。setTimeout不适用于bounce.js和fullpage.js

我的网站（“块”）的标题显示在首页部分中心的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)); 
      } 
     } 
    }

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

我在这里做错了什么？

来源

2014-12-06 ClaytonAlanKinder

（我猜）你需要使用闭包：http：//brackets.clementng。（）函数（）{..}，（parseInt（x）* 100））;我的/ post/24150213014/example-of-javascript-closure-settimeout-里面 – 2014-12-06 20:06:51

尝试setTimeout – Dave 2014-12-06 20:13:13

感谢您的帮助，伙计们。可悲的是，这些选择都没有奏效。 – ClaytonAlanKinder 2014-12-06 20:37:32

听起来好像您正在使用默认选项verticalCentered:true，因此您的部分内的元素将被插件包装。您将需要使用委派或使用您的JavaScript回调afterRender内为建议：

AfterRender阶段（）

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

也劝in fullPage.js FAQs：在全页的 '一个AfterRender' 回调对它们进行初始化：

使用fullPage.js

简短的回答时，我的其他插件不工作。 JS。

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

来源

2014-12-07 18:51:27 Alvaro

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

回答

相关问题