Question

我确定我在这里错过了一些简单的东西，但我不能为我的生活弄清楚。我有这个小CSS动画，我想在页面加载时开始，每当用户滚动到页面顶部（或点击导航链接，将它们带到顶部）。如果我纯粹使用CSS，它只能在页面加载时工作一次。所以我对jQuery的意思是：

检查页面是否滚动小于50px
然后删除具有动画的类
最后重新申请课程，再次开始动画。

我的JS代码如下所示：

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() < 50) {
      $('.restart').removeClass('animated');
      $('.restart').addClass('animated');
    }
  });
});

HTML：

<section id="start">
  <div class="aufmacher">
    <div class="container">
      <h1>Wir bieten</h1>
        <ul>
        <li class="restart">Ambulante Versorgung</li>
        <li class="restart">Tagespflege</li>
        <li class="restart">Beratung &amp; Service</li>
      </ul>
    </div>
  </div>
</section>

CSS：

@keyframes sliiide {
  0% { padding-left: 700px; }
  100% { padding-left: 0; }
}
.animated {
  animation: sliiide 1.5s 1;
}
.animated:nth-child(2) {
  animation-duration: 2s;
}
.animated:nth-child(3) {
  animation-duration: 2.5s;
}

Find a JSFiddle here.

我必须承认我并不是非常了解jQuery，它主要是复制，粘贴，试验和错误的事情。我现在已经在互联网上搜索了很长一段时间，我认为这应该有用，但它不是吗？

非常感谢任何和所有帮助！如果还有更好的方法，请告诉我。我正在试验......

感谢您的时间，安娜〜

Answer 1

试试这个：

jQuery的：

$(document).ready(function() {
    $('#start').click(function(){
    //alert($(window).scrollTop());
    });
   $(window).scroll(function() {
      if ($(window).scrollTop() < 80) {
         $('.restart').addClass('animated');
      }
      else
      {
         $('.restart').removeClass('animated');
      }      
   });
});

- 去除和添加 - 立即发生得如此之快，以至于没有时间进行评估。这个解释并不详细，但如果有人有更深层次的解释，请张贴以允许我们的启示。

注意：这是一个想法，一个可行的解决方案，而不是100％经过测试的东西。我希望它有所帮助。

Answer 2

不要删除和重新添加类，而是尝试删除并添加元素本身。

$(document).ready(function() {
  //Use a bool here so you can detect when you want to reset the animation
  var reset = false;

  $(window).scroll(function() {
    if ($(this).scrollTop() < 80) {
        if (reset) {

        //set to false so the animations only occur once
        reset = false

        //for each item to be animated, replace with new copy
        $('.animated').each(function(){
            var el = this;
            var clone = el.cloneNode(true);
            el.parentNode.replaceChild(clone, el);
        });
      }
    }else {
        //prepare for reseting animation
        reset = true
    }
  });
});

不要忘记将动画类添加到适当的元素中，以便在加载时设置动画

<section id="start">


<div class="aufmacher">
    <div class="container">
      <h1>Wir bieten</h1>
        <ul>
        <li class="restart animate">Ambulante Versorgung</li>
        <li class="restart animate">Tagespflege</li>
        <li class="restart animate">Beratung &amp; Service</li>
      </ul>
    </div>
  </div>
</section>

jQuery if（.scrollTop（）＆lt; 100）仅适用于页面加载......？

2 个答案: