外部加载的目标元素

Question

我正在尝试定位 ScrollReveal 函数要使用的元素，该元素是从另一个名为 "header.html" 的 html 文件加载的。目前，ScrollReveal 效果不会出现，但我的 index.html 中的元素会出现。

JS:

sr.reveal('nav', {
    origin: 'left',
    distance: '10rem',
    duration: 900,
});

在我的 HTML 中加载函数：

$(function() {
        $("#header").load("header.html");
        $("#footer").load("footer.html");
    });

导航在里面 header.html

Answer 1

使用 load() 的完整回调来确保在尝试使用新内容之前已加载它

$(function() {
  $("#header").load("header.html", function() {
    // new html has been inserted
    // do what you want with it
    sr.reveal('nav', {
      origin: 'left',
      distance: '10rem',
      duration: 900,
    });
  });

  $("#footer").load("footer.html");
});

外部加载的目标元素

Target element that is loaded externally

javascript

jquery

html

scrollreveal.js