Javascript 使用scrollTop制作动画

朋友们，我创建了一个函数，根据主体或div的滚动位置，对元素

进行动画制作

或

'deanimate'

，它工作正常，工作方式如何

animate = animate;
desanimate = undo animate;

“脱盐”：

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

+函数（$）{
var animate=函数（目标、位置）{
css（'display'，'inlineblock'）；
如果（位置=='从右到左'| |位置=='从右到右'）{
css（'right'，'500px'）；
css（'左'，''）；
目标动画({
不透明度：1，
右：“0px”
}, 500);
}
else if（位置==‘从左到右’| |位置==‘从左到左’）{
css（'left'，'500px'）；
css（'right'，''）；
目标动画({
不透明度：1，
左：“0px”
}, 500);
}
};
var disanimate=功能（目标、位置）{
如果（位置=='从右向左'| |位置==='从左向左'）{
css（'左'，''）；
目标动画({
不透明度：0，
右：'245px'
}, 500);
}
else if（位置==‘从左到右’| |位置==‘从右到右’）{
css（'左'，''）；
目标动画({
不透明度：0，
左：'245px'
}, 500);
}
};
$（窗口）.on（'load'，function（）{
var target=$（“[数据动画时间]”）；
var animationInitial=target.data（'animation-time'）[0]；
var animationFinal=target.data（'animation-time'）[1]；
var position=target.data（'animation-position'）；
显示的var=假；
$（'.container'）。滚动（函数（）{
var scroll=$（this.scrollTop（）；
如果（！显示&&（animationInitial<滚动&&animationFinal>滚动））{
console.log（“动画”）
设置动画（目标、位置）；
显示=正确；
}
else if（显示和（animationFinalscroll））{
console.log（“disanimate”）
解除（目标、位置）；
显示=假；
if（position.split（“-”[0]”）=position.split（“-”[2]”）
位置=反（位置）；
}
});
});
}（jQuery）；
var反=功能（位置）{
如果（位置==“从左到左”）
返回“从右到右”
其他的
返回“从左到左”
}

Css:-它是正确的500px。所以卡的初始位置是固定的。我将其更改为基于输入的动态，无论何时添加right（css），您都必须确保left（css）为null，因为如果您同时提供right和left，则在动画过程中它将变得混乱

从左到右和从右到左的初始和最终位置相同。。所以不需要额外的配件。。所以，即使你来自下层，它也会起作用

从左到左和从右到右没有相同的初始和最终位置。。所以在反向循环中，从左到左将变成从右到右。我是用反函数做的

---

我建议您尝试只使用CSS来完成它，如果有什么不可能的话，可以使用JS的一些支持。在可能的情况下总是使用CSS，简化了很多事情。有了CSS，还支持IE8吗？我认为@Victor175这是不可能的。好吧，你可以尝试一下，即使你使用了一些不受支持的属性，你肯定可以得到一个shim/shiv或类似的东西来掩盖它。我认为这不是解决我问题的办法，victor，我已经用javascript做了，我不能把时间浪费在css上，就像我在js上做的那样。我的函数只有一个问题，我应该集中精力解决这个问题。太好了！你能解释一下你做了什么吗？

left-to-right
right-to-left

    + 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"
    }