在fullPage.js中使用'afterRender'回调来运行带有jQuery事件的代码

问题描述

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

I'm using a library called fullPage.js to create a site.Within this I've used this setTimeout function to change a background image.

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

fullPage.js文档指出:

The fullPage.js documentation states:

afterRender回调看起来像这样( https://github.com/alvarotrigo/fullPage .js#afterrender ):

The afterRender call back looks like this (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函数.

I'm not familiar with this structure, so I'm not too sure how to adapt my original setTimeout function within the fullPage.js afterRender function format.

任何帮助都将不胜感激，我对此一无所知.

Any help is greatly appreciated, I'm out of my depth with this one.

推荐答案

如果要在页面加载时触发超时，请执行以下操作:

Just do this if you want to fire the timeout on page load:

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

这篇关于在fullPage.js中使用'afterRender'回调来运行带有jQuery事件的代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！