在fullPage.js中使用'afterRender'回调来运行带有jQuery事件的代码 [英] Using the 'afterRender' callback in fullPage.js to run code with jQuery events

问题描述

我正在使用一个名为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:

您的内容将被包装在其他元素中，从而改变其在站点DOM结构中的位置.这样，您的内容将被视为动态添加的内容"，并且大多数插件需要将这些内容最初位于站点上才能执行其任务.使用afterRender回调初始化插件( 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事件的代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！