Как обратная анимация с scrollTop

Question

Я застрял в чем-то здесь.

Несколько элементов сайта, которые я делаю, будут иметь эффект слайда и слайда слева или справа (определяется мной). Поэтому я создал этот кусок кода, который помогает мне достичь того, что я хочу, если не для одной проблемы: обратная анимация вообще не работает.

Всех 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 достигают начальное время, анимация бывает .. А если Свиток .container достичь конечного времени, анимация должна реверс

Animate:

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: Я добавил атрибут boolean shown. Событие прокрутки запускается много браузером. Логическое исключает очередность animate. Я также отключил линию self.element.css('display','none');, которая не давала шанса на анимацию.

Я надеюсь, что эта помощь для вас представляет собой настоящий код. :)