Javascript 如何使用scrollTop反转动画

我被困在这里了

我正在做的网站的几个元素会有一个左右滑动的效果，由我决定。因此，我创建了这段代码，帮助我实现我想要的，如果不是因为一个问题的话：反向动画根本不起作用

所有javascript代码：

+ function($) {
  var ScrollAnimation = function(element) {
    var self = this;
    self.element = element;
    self.initial = self.element.data('animation-time')[0];
    self.final = self.element.data('animation-time')[1];
    self.animation = self.element.data('animation-type');
    self.position = self.element.data('animation-position');

    $('.container').scroll(function() {
      var scroll = $(this).scrollTop();

      if (self.initial < scroll && self.final > scroll) {
        self.animate();
      }
      else if (self.final < scroll || self.initial > scroll) {
        self.disanimate();
      }
    });
  };

  ScrollAnimation.prototype.animate = function() {
    var self = this;
    self.element.css('display', 'inline-block');

    if (self.position === 'right') {
      self.element.animate({
        opacity: 1,
        right: '0px'
      }, 500);
    }
    else if (self.position === 'left') {
      self.element.animate({
        opacity: 1,
        left: '0px'
      }, 500);
    }
  };

  ScrollAnimation.prototype.disanimate = function() {
    var self = this;

    if (self.animation === 'fade') {
      self.element.fadeOut(500);
    }
    else if (self.animation === 'slide') {
      self.element.css('display', 'none');

      if (self.position === 'right') {
        self.element.css('right', '245px');
      }
      else if (self.position === 'left') {
        self.element.animate({
          opacity: 0,
          left: '245px'
        }, 500);
      }
    }
  };

  ScrollAnimation.prototype.addClass = function() {
    var self = this;

    self.element.addClass('is_active');
  };

  ScrollAnimation.prototype.removeClass = function() {
    var self = this;

    self.element.removeClass('is_active');
  };

  $(window).on('load', function() {
    $('[data-animation-time]').each(function() {
      var animation = $(this);
      animation = new ScrollAnimation(animation);
    });
  });

}(jQuery);

加载窗口时，它将查找具有日期时间动画属性的所有元素，并创建ScrollAnimation的实例

  var ScrollAnimation = function(element) {
    var self = this;
    self.element = element;
    self.initial = self.element.data('animation-time')[0];
    self.final = self.element.data('animation-time')[1];
    self.animation = self.element.data('animation-type');
    self.position = self.element.data('animation-position');

    $('.container').scroll(function() {
      var scroll = $(this).scrollTop();

      if (self.initial < scroll && self.final > scroll) {
        self.animate();
      }
      else if (self.final < scroll || self.initial > scroll) {
        /*self.disanimate();*/
      }
    });
  };

脱氨基：

  ScrollAnimation.prototype.animate = function() {
    var self = this;
    self.element.css('display', 'inline-block');

    if (self.position === 'right') {
      self.element.animate({
        opacity: 1,
        right: '0px'
      }, 500);
    }
    else if (self.position === 'left') {
      self.element.animate({
        opacity: 1,
        left: '0px'
      }, 500);
    }
  };

但是去动画化不起作用，只有动画化。我真的不知道这里有什么问题，如果能帮上忙，我将不胜感激

---

带有工作代码的代码笔：

我让你的代码笔工作了，我想你会从中发现你的源代码缺少什么

链接：

我所做的：

HTML方面：我刚刚添加了两个与列表元素具有相同数据动画时间属性的元素，以查看它是否真的有效。 CSS：我将.list的位置设置为固定而不是绝对。absolute让列表跟随滚动，所以我们看不到效果。 Javascript：我添加了一个布尔属性，如图所示。滚动事件经常由浏览器触发。布尔值避免了动画的排队。我还禁用了self.element.css行的“display”和“none”；这并没有让动画发生的机会。

---

我希望这对你真正的代码有帮助

我得说。。你真是个天才，本！hahaThanks，我很高兴能帮助你：

  ScrollAnimation.prototype.animate = function() {
    var self = this;
    self.element.css('display', 'inline-block');

    if (self.position === 'right') {
      self.element.animate({
        opacity: 1,
        right: '0px'
      }, 500);
    }
    else if (self.position === 'left') {
      self.element.animate({
        opacity: 1,
        left: '0px'
      }, 500);
    }
  };

  ScrollAnimation.prototype.animate = function() {
    var self = this;
    self.element.css('display', 'inline-block');

    if (self.position === 'right') {
      self.element.animate({
        opacity: 1,
        right: '0px'
      }, 500);
    }
    else if (self.position === 'left') {
      self.element.animate({
        opacity: 1,
        left: '0px'
      }, 500);
    }
  };