用scrollTop制作动画

Question

animate = animate;
desanimate = undo animate;

朋友们，我创建了一个函数来执行元素animate或'desanimate'，这取决于主体或div的滚动在哪里，它的工作正常，它是如何工作的？

<li data-animation-time="[100, 800]" data-animation-position="right" class="list-item one"></li>

first数组的data-animation-time值是initial值，即动画师函数在scrollTop传递该值时应该被调用，second值是end，'desanimate'函数应该在scrollTop传递该值时调用。

正如您在这里看到的那样，一切都在工作：-> Codepen：http://codepen.io/celicoo/pen/ogKGEP (您需要滚动以看到动画的发生)。

现在，我想确定动画的发生方式以及它应该以什么方式结束，因为我改变了这个过程：

data-animation-position="right-to-left"而不仅仅是right或left，我将一些ifs语句添加到animation和“des动画”函数中：

动画：

var animate = function(target, position) {
    target.css('display', 'inline-block');

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

“无生命生物”：

var desanimate = function(target, position) {

    if (position === 'right-to-right') {
        target.animate({
            opacity: 0,
            right: '245px'
        }, 500);
    }
    else if (position === 'right-to-left') {
        target.animate({
            opacity: 0,
            left: '245px'
        }, 500);
    }
    else if (position === 'left-to-left') {
        target.animate({
            opacity: 0,
            left: '245px'
        }, 500);
    }
    else if (position === 'left-to-right') {
        target.animate({
            opacity: 0,
            right: '245px'
        }, 500);
    }
};

而且不是以“无生命”的方式工作，有些东西不是很好，我真的看不出它是什么。

有人能帮我一把吗？当我倒置步长值时，有什么可以做‘去生命’不工作呢？

示例：

left-to-right
right-to-left

代码与旧代码只在一边工作(例如:左或右)；

代码笔与新代码不工作100%与多个边(例如:左到左，左到右，右到右或右到左)；

Answer 1

更新了代码页链接。只要看看，让我知道它是否符合要求。

    + function($) {

        var animate = function(target, position) {
            target.css('display', 'inline-block');

            if (position === 'right-to-left' || position === 'right-to-right'  ) {
      target.css('right', '500px');
       target.css('left','' );
                target.animate({
                    opacity: 1,
                    right: '0px'
                }, 500);
            }
            else if (position === 'left-to-right' || position=="left-to-left") {
       target.css('left', '500px');
       target.css('right', '');
                target.animate({
                    opacity: 1,
                    left: '0px'
                }, 500);
            }
        };

        var disanimate = function(target, position) {

            if (position === 'right-to-left' || position ==="left-to-left") {
      target.css('left','' );
                target.animate({
                    opacity: 0,
                    right: '245px'
                }, 500);
            }
            else if (position === 'left-to-right' || position === "right-to-right") {
                target.css('left','' );
      target.animate({
                    opacity: 0,
                    left: '245px'
                }, 500);
            }
        };

        $(window).on('load', function() {

            var target = $('[data-animation-time]');
            var animationInitial = target.data('animation-time')[0];
            var animationFinal = target.data('animation-time')[1];
          var position = target.data('animation-position');
            var shown = false;              

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

                if (!shown && (animationInitial < scroll && animationFinal > scroll)) {
      console.log("animate")
                    animate(target, position);
                    shown = true;
                }
                else if (shown && (animationFinal < scroll || animationInitial > scroll)) {
         console.log("disanimate")
                    disanimate(target, position);
                    shown = false;
        if (position.split("-")[0] == position.split("-")[2])
        position = anti(position);
                }
            });

        });

    }(jQuery);

    var anti = function (position){
      if (position == "left-to-left")
        return "right-to-right"
        else 
          return "left-to-left"
    }

1. Css :-它是对的，500便士。因此，卡的位置是固定的。我根据输入将其更改为动态，每当您添加右(Css)时，必须确保左(Css)为空(Css)，因为如果同时给右和左，则在动画期间会出现混淆的。
2. 从左到右，从右到左，两者的初始位置和最后位置相同。所以不需要额外的配件..。所以即使你从下来也会起作用的
3. 从左到左，从右到右，它们的初始位置和最后位置都不一样。所以从左到左将变成从右到右的反向循环。我用的是抗功能