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

回答

相關問題