Question

我在这里遇到了什么。

我正在做的网站的几个元素将向左或向右（由我确定）具有slideIn和slideout效果。所以我创建了这段代码，帮助我实现我想要的，如果不是因为一个问题：反向动画根本不起作用。

所有的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);

说明：

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

当窗口加载时，它会查找具有日期时动画属性的所有元素，并创建一个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();*/
      }
    });
  };

现在，每当.container的Scroll达到初始时间时，动画就会发生..如果.container的Scroll到达最后时间，动画应该反转

动画：

  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);
    }
  };

Desanimate：

  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);
    }
  };

但是，desanimate不起作用，只有动画。我真的不知道这里有什么问题，一只手会非常感激......

带有工作代码的Codepen：http://codepen.io/celicoo/pen/yymNRX

Answer 1

我让你的codepen工作，我想你会发现你的源代码中缺少的东西。

链接：http://codepen.io/benjaminchanudet/pen/YPmydG

我做了什么：

HTML方面：我刚刚添加了两个元素，其属性与列表元素相同data-animation-time，以确定它是否真的有效。
CSS：我将.list position放到fixed而不是absolute。 absolute使列表跟随滚动，因此我们看不到效果。
Javascript：我添加了一个布尔属性shown。滚动事件由浏览器触发很多。布尔值避免了animate的排队。我也禁用了那些没有动画发生机会的self.element.css('display','none');行。

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

如何使用scrollTop进行反向动画

1 个答案: