Javascript 与 jQuery 或 Javascript 一起淡入

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 7 年前。

Improve this question

我怎样才能让Javascript像这样淡入淡出: http://www.bewerberfilm.com

视频从左侧和右侧淡入。视频上方的文本框以不同的第二设置淡入。我怎样才能意识到这一点？谁能告诉我或帮助我吗？我没有 JS/Jquery 经验，但我想学习该语言。

Answer 1

您可以向 scroll 事件添加监听器，如下所示:

$(document).ready(function() {
  var element = $('#MyElement');

  var running = false;

  $(window).scroll(function() {
    console.log(element.position());
    if (element.position().top <= $(window).scrollTop() + $(window).innerHeight() && !running) {
      console.log("Triggering animation");
      running = true;
      element.removeClass().addClass('fadeInLeftBig animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
        $(this).removeClass();
      });
    }
  });
});

#MyElement {
  height: 40px;
  clear: both;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>adsada
  <br/>
</p>
<div id="MyElement"></div>

这里是一个工作 fiddle ，整个 css 对于 StackOverflow 片段来说太大了:http://jsfiddle.net/df19qumg/