使用fullPage.js中的“fullPage.js”回调来运行带有jQuery事件的代码

Question

我正在使用一个名为fullPage.js的库来创建一个站点。在这个函数中，我使用了这个setTimeout函数来更改背景图像。

setTimeout(function(){ 
  $("#bg-opacity").css({
       "opacity" : 1,
       "background-image": "url(https://media.giphy.com/media/tIeCLkB8geYtW/giphy.gif)"
  });
}, 300);

fullPage.js文档声明：

您的内容将被包装在其他元素中，更改其在站点DOM结构中的位置。这样，您的内容将被视为“动态添加的内容”，并且大多数插件需要最初在站点上的内容来执行他们的任务。使用afterRender回调来初始化插件(https://github.com/alvarotrigo/fullPage.js/wiki/FAQ---Frequently-Answered-Questions#my-javascriptjquery-events-dont-work-anymore-when-using-fullpagejs)

afterRender回调如下所示(https://github.com/alvarotrigo/fullPage.js#afterrender)：

new fullpage('#fullpage', {
    afterRender: function(){
        var pluginContainer = this;
        alert("The resulting DOM structure is ready");
    }
});

我不太熟悉这个结构，所以我不太确定如何在fullPage.js afterRender函数格式中调整我的原始afterRender函数。

任何帮助都是非常感谢的，我对这件事的研究已经超出了我的深度。

Answer 1

如果您想在页面加载时触发超时，只需这样做：

new fullpage("#fullpage", {
  afterRender: function() {
    setTimeout(function() {
      $("#bg-opacity").css({
        opacity: 1,
        "background-image":
          "url(https://media.giphy.com/media/tIeCLkB8geYtW/giphy.gif)"
      });
    }, 300);
  }
});