动画（绑定到 scrollTop）仅在我停止滚动时完成

Question

当滚动达到 15% 以上时，我的动画事件几乎暂停，或者说完成时明显变慢。这是为什么？如果应该向左设置动画，但只有在我停止滚动时才会这样做。

$(window).scroll(function ()
{
    var content_height = $(document).height();
    var content_scroll_pos = $(window).scrollTop();
    var percentage_value = content_scroll_pos * 100 / content_height;

    if(percentage_value > 15)
    {
    TweenMax.to(".bar", 3, {right:"0", ease:Bounce.easeOut})

    }
     else
    {
            TweenMax.to(".bar", 2, {right:"-125%", ease:Power2.easeOut})

    }
});

Answer 1

这里有一个解释 cmets 的解决方案演示：

// This gets called _every time_, you scroll a little bit ("every time" as in "every frame").
// So we introduce a new variable that acts as a filter and only lets the function trigger, once the status changes.
// 0 = not changed (it is, where it was on page loading)
// 1 = out of the screen
// 2 = back in the screen
var status = 0;
$(window).scroll(function ()
{
  var content_height = $(document).height();
  var content_scroll_pos = $(window).scrollTop();
  var percentage_value = content_scroll_pos * 100 / content_height;
  
  var newStatus = percentage_value > 15 ? 2 : 1;
  if(newStatus == status)
    return;
  switch(newStatus) {
    case 1:
      TweenMax.to(".bar", 2, {right:"-125%", ease:Power2.easeOut});
      break;
    case 2:
      // because this function got called all the time, the animation started all over again, each frame.
      // And becase the animation starts slowly it stayed slow as long as the user scrolled.
      TweenMax.to(".bar", 3, {right:"0", ease:Bounce.easeOut});
      break;
  }
  status = newStatus;
});

.foo {
  height: 2000px;
}
.bar {
  background-color: red;
  height: 50px;
  width: 50px;
  position: fixed;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  Test<br />
  Test
  <div class="bar">
  </div>
</div>

顺便说一句： 由于令人讨厌的每帧问题，如果您不在该函数内计算 $(document)、$(document).height() 和 $(window) 的值，您可以显着提高性能。我建议，将所有这些代码的范围限定在一个包装中，例如

(function() {
  var jDocument = $(document),
      content_height = jDocument.height(),
      jWindow = $(window),
      status = 0;
  // [CODE HERE, using jWindow instead of $(window)]
})();

这也解决了这个问题，status 要么需要一个又长又复杂的名称，否则就有被其他人的代码覆盖的危险。

PS：我不得不承认，我不喜欢你当前状态下的动画。它对我来说弹跳太多了——即使是太多了，我根本看不到它弹跳。对我来说，它似乎出现又消失，我第一次看到它。