Question

我在jquery中编写了一个代码，当用户滚动超过某一点时，会输出文本。但是，如果用户停止滚动，即使动画不完整，动画也会停止。我该如何防止这种情况发生？

$(document).scroll( function() {
    if ($('body').scrollTop() > $('.sec1').offset().top - 100) {
        set();
    }
});

function set() {
    heading1 = 'Gaming Redefined.'
    type(); 
}

function type() {
    $('.heading1').html(heading1.substr(0,len++));

}

Answer 1

有一个很酷的插件叫做typed.js我强烈推荐：https://github.com/mattboldt/typed.js/

使用该插件可以执行以下操作：

var typing = false;
$(window).scroll(function() {
  if ($(window).scrollTop() > 10 && typing == false) {
    typing = true;
    typeIt("This is some funky typed text.");
  }
});

function typeIt(text) {
  $("#typed_output").typed({
    strings: [text],
    typeSpeed: 25,
    startDelay: 400,
    showCursor: false,
    // backDelay: 750, // pause before backspacing
    loop: false, // loop on or off (true or false)
    loopCount: false, // number of loops, false = infinite
    callback: function() {}
      // call function after typing is done. You can use this to set the typing variable to false if you wanted so that your text types again.
      // callback: function(){typing = false; } 
  });
}

.container {
  height: 300px;
  background: #333;
}
#typed_output {
  padding: 200px 0 100px 50px;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.4/typed.min.js"></script>

<div class="container">
  <h1 id="typed_output"></h1>
</div>

当一个人在JQuery中滚动超过某一点时，如何触发键入动画

1 个答案: