jQuery 动画 - 多元素

Question

我一直在尝试在我曾经实现过的网页上实现一个效果，但我想将它应用到多个页面部分。但是我在定位和获取所需动画时遇到问题

我正在使用 jQuery 和 slideUp 方法。我有以下代码；

(function() {

    var pageEl = $('div.first-layer');

    $(document).on('scroll', function() {
        pageEl.slideUp(1300, function() { $(document).off('scroll').remove(); });
    });
})();

这达到了预期的效果；

如您所见，我已经成功地使用上述代码实现了一次此动画，但我希望能够将此效果应用到具有 3 个不同元素的滚动上。

我的想法是附加一个 id/class 并且每个 class 都有一个不同的滚动事件附加到它，当它到达每个 class/id 所需的滚动点时隐藏另一个2 个元素。

如果有人能指出正确的方向或提供一些建议，我们将不胜感激。现在已经坚持了一段时间。如果您想了解更多信息，请直接询问。

谢谢。

编辑：我创建了一个 JSFiddle，供您查看我想要实现的目标； https://jsfiddle.net/tdatkxrf/4/

Answer 1

好的，所以，根据您希望它如何触发事件，您可能需要更多地使用它，现在它非常敏感，但在这里：

编辑： 在 Plunkr 上，我通过添加一个计算滚动次数的新变量修改了灵敏度。我将保持原样，这样您就可以看到这两个实现（带变量的 plunker，没有变量的答案）。 plunkr：https://plnkr.co/edit/02mko4f5ZSqSDLtlvDwR?p=preview

html:

<!DOCTYPE html>
<html>

  <head>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1 style="text-align: center; font-family: helvetica;">jQuery slideUp</h1>
    <div class="container" style="display: flex; align-items: center; flex-direction: column; position: relative; background: grey;">
      <div id="section-one" style="height: 300px; width: 300px; background: #cc6699;">
        <h1 style="text-align: center; font-family: helvetica;">Section One</h1>
      </div>
      <div id="section-two" style="display:none; height: 300px; width: 300px; background: #cc9966;">
        <h1 style="text-align: center; font-family: helvetica;">Section Two</h1>
      </div>
      <div id="section-three" style="display: none; height: 300px; width: 300px; background: #6699cc;">
        <h1 style="text-align: center; font-family: helvetica;">Section Three</h1>
      </div>
    </div>
  </body>

</html>

jQuery:

// Code goes here

$(document).ready(function() {

  var e1  = $('#section-one');
  var e2 = $('#section-two');
  var e3 = $('#section-three');

  var sections = [e1, e2, e3];

$('.container').bind('mousewheel', function(e){scrollCheck(e);});

var scrollCheck = function(e){
    if(e.originalEvent.wheelDelta /120 > 0) {
      for(i= 0; i<sections.length;i++){
        j=i-1;
        if(sections[i].attr('display') != "none" && i > 0){
          sections[i].slideUp(1300);
          sections[i].attr('display', "none");
          sections[j].slideDown(1300);
          sections[j].attr('display', "");
          return;
        }
      }
    }
    else{
      for(i= 0; i<sections.length;i++){
        j=i+1;
        if(sections[i].attr('display') != "none" && i+1 < sections.length){
          sections[i].slideUp(1300);
          sections[i].attr('display', "none");
          sections[j].slideDown(1300);
          sections[j].attr('display', "");
          return;
        }
      }
    }
  }
});

还有一些包可以检测鼠标滚轮事件，您可能想看看其中的一个。

jQuery 动画 - 多元素

jQuery Animation - Multiple Elements

jquery

animation

transition

slideup

show-hide