javascript - 使用 fullPage.js 中的 'afterRender' 回调来运行带有 jQ​​uery 事件的代码

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 文档指出:

your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as "dynamically added content" and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins (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 函数格式中调整我原来的 setTimeout 函数。

非常感谢任何帮助，我无法理解这个问题。

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);
  }
});