Использование обратного вызова afterRender в fullPage.js для запуска кода с событиями jQuery - PullRequest
Новая
       41

Использование обратного вызова afterRender в fullPage.js для запуска кода с событиями jQuery

3 голосов
/ 24 октября 2019

Я использую библиотеку с именем 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");
    }
});

Я не знаком с этой структурой,так что я не очень уверен, как адаптировать мою исходную функцию setTimeout в формате функции fullRage.js afterRender.

Любая помощь очень ценится, с ней мне не по душе.

1 Ответ

0 голосов
/ 28 октября 2019

Просто сделайте это, если вы хотите запустить тайм-аут при загрузке страницы: 

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