使用 fullPage.js 中的“afterRender”回调通过 jQuery 事件运行代码

我正在使用一个名为 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 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 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 函数格式中调整我原来的 setTimeout 函数。

非常感谢您的任何帮助，我对此一无所知。

如果您想在页面加载时触发超时，只需执行以下操作：

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