Question

我有一个网页，使用jQuery库scrollreveal在窗口加载时慢慢显示页面上的各种html元素。

代码工作正常。但是在最初加载页面时响应有点慢。我想这是因为我有多个sr.reveal（）函数在运行。我已经尝试将元素放入三个或四个具有duration和origin属性的单独函数中，但这不起作用。

我想缩短代码，以便所有源自顶部/底部/左侧且持续时间相同的元素都放在同一个函数中。基本上，我想缩短我的代码。

jQuery源代码：

<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
    <script>
      window.sr = ScrollReveal();
      sr.reveal('h1', {
        duration: 1500,
        origin: 'top'
      });

      sr.reveal('.icons', {
        duration: 3500,
        origin: 'left'
      });

      sr.reveal('#email-link1', {
        duration: 1000,
        origin: 'bottom'
      });

      sr.reveal('#cv-link', {
        duration: 1000,
        origin: 'bottom'
      });

      sr.reveal('#tel-link', {
        duration: 1000,
        origin: 'bottom'
      });

      sr.reveal('p', {
        duration: 1000,
        origin: 'bottom'
      });

      sr.reveal('h2', {
        duration: 1000,
        origin: 'top'
      });

      sr.reveal('h3', {
        duration: 1000,
        origin: 'top'
      });

      sr.reveal('.back-to-top', {
        duration: 1000,
        origin: 'top'
      });

      sr.reveal('.email-link2', {
        duration: 1000,
        origin: 'bottom'
      });

      sr.reveal('.tel-link2', {
        duration: 1000,
        origin: 'bottom'
      });

    </script>

我试过这样做：

sr.reveal（'h2'，'h3'，{} ......等）

但是代码没有运行。任何帮助都会非常感谢。

Answer 1

我认为这会缩短它。您需要将其余数据添加到阵列中。这未经过测试。

window.sr = ScrollReveal();    

var revealers = [
    ['h1', 1500, 'top'],
    ['.icons', 3500, 'top']
];

for(var i = 0; i < revealers.length; i++) {
    sr.reveal(revealers[i][0], {
        duration: revealers[i][1],
        origin: revealers[i][2]
    });
}

如果您愿意，可以将所有功能全部投入到功能中。这使它看起来更好。

修改

作为可重用性的功能：

function revealMe(revealerArray, scrollReveal) { for(var i = 0; i < revealerArray.length; i++) { sr.reveal(revealerArray[i][0], { duration: revealerArray[i][1], origin: revealerArray[i][2] }); } }

在另一个地方：

window.sr = ScrollReveal(); var revealers = [ ['h1', 1500, 'top'], ['.icons', 3500, 'top'] ]; revealMe(revealers, sr);

Answer 2

值得一提的是，如果你有这样的代码：

  sr.reveal('h2', {
    duration: 1000,
    origin: 'top'
  });

  sr.reveal('h3', {
    duration: 1000,
    origin: 'top'
  });

  sr.reveal('.back-to-top', {
    duration: 1000,
    origin: 'top'
  });

它与：

相同

  sr.reveal('h2, h3, .back-to-top', {
    duration: 1000,
    origin: 'top'
  });

第一个参数只是一个CSS选择器。如果您需要匹配多个选择器，它与CSS中的相同 - 只需用逗号分隔您的选择器。

将多个元素放入一个jQuery scrollreveal函数中

2 个答案: