jQuery 动画 - 多个元素答案

【问题标题】：jQuery Animation - Multiple ElementsjQuery 动画 - 多个元素
【发布时间】：2016-06-13 09:09:32
【问题描述】：

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

我正在使用 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/

【问题讨论】：

发布您的完整代码或创建小提琴
99% 的问题都需要MCVE (Minimal, Complete, and Verifiable Example)。
别担心，我正在创建一个 plunkr。有点难以向您展示源代码，因为它相当大。
您可以查看一个滑块示例并在滚动事件中实现它。基本上是一样的。
嗨，Spluf，如果您不介意，您能详细说明一下吗？也许是一个例子或一个解决方案？谢谢。

标签： jquery animation transition show-hide slideup

【解决方案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;
        }
      }
    }
  }
});

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

【讨论】：

非常感谢您向我展示如何执行此操作，我将在我的项目中实现它。但是你说它现在有点敏感我该如何调低它，这样用户就不会意外地同时滚动所有部分？再次感谢你，虽然我真的很感激。
最简单的方法是用箭头键替换滚动事件，这样您就不必检查是否有滚动条或多少滚动应该等于页面幻灯片。此外，鼠标滚轮包可能有一些处理程序（以前从未使用过）。我还在研究那个 plunker，所以当我有什么工作时我会通知你。
我刚刚发现这个包做同样的事情，但比我做的更好，从我在他们的文档中阅读的内容来看，接缝很容易使用。看看这里：alvarotrigo.com/fullPage/#firstPage
我还稍微调低了滚动，你可以在 plunker 上查看实现。祝你好运；）
感谢 Spluf，我真的很喜欢你的实现，因为 fullPage.js 没有我想要的感觉，我的意思是它是一个非常好的插件，但它本质上是一个滑块：p，这样你可以为每个单独的部分设置动画。而不是从左到右或从上到下。这就是我在 jQuery 中使用 slideUp 方法的原因。非常感谢您的帮助。