Question

我实现了我在网上找到的这个代码并添加了一个if语句来检查该元素之前是否已经过动画。如果有，它应该删除使其成为动画目标的类。出于某种原因，它不起作用，并且元素无论何时进入视口都会动画，而不仅仅是第一次像我想要的那样。

var $flyInLeft = $('.fly-in-left');
var $window = $(window);

function check_if_in_view() {
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height);

  $.each($flyInLeft, function() {
    var $element = $(this);
    var element_height = $element.outerHeight();
    var element_top_position = $element.offset().top;
    var element_bottom_position = (element_top_position + element_height);

    //check to see if this current container is within viewport
    if ((element_bottom_position >= window_top_position) &&
        (element_top_position <= window_bottom_position)) {
      $element.addClass('animated slideInLeft already-viewed');
    } else {
      $element.removeClass('animated slideInLeft');
    }

    // This is the bit that doesn't seem to work.
    if ($element.hasClass('already-viewed')) {
      $element.removeClass('fly-in-left');
    }
  });

Answer 1

删除类不应删除附加到元素的绑定。

在制作动画之前检查活动课程。

if (!$element.hasClass('already-viewed')) {
    //check to see if this current container is within viewport
    if ((element_bottom_position >= window_top_position) &&
    (element_top_position <= window_bottom_position)) {
      $element.addClass('animated slideInLeft already-viewed');
    } else {
      $element.removeClass('animated slideInLeft');
    }
}

最好从元素中删除任何绑定，因为你仍然会在滚动时运行这些函数。所以，您可以将其更改为：

    //check to see if this current container is within viewport
    if ((element_bottom_position >= window_top_position) &&
    (element_top_position <= window_bottom_position)) {
      $element.addClass('animated slideInLeft already-viewed');

      //Unbind scroll event
      $(window).off("scroll", check_if_in_view);

    } else {
      $element.removeClass('animated slideInLeft');
    }

Answer 2

我发现了什么是错的。我将选择存储在变量的顶部，所以如果我删除了以动画元素为目标的类并不重要，因为已经进行了选择。

我从顶部删除了它并且有效：

var $flyInLeft = $('.fly-in-left');

jQuery - 滚动bug的动画

2 个答案: