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时应调用动画函数} value是end，当'desanimate'传递该值时，应调用scrollTop函数。

所有工作正如您在此处所见 - ＆gt; Codepen：http://codepen.io/celicoo/pen/ogKGEP（你需要滚动才能看到动画发生）。

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

data-animation-position="right-to-left"而非right或left，我将一些ifs语句添加到animation和'desanimation'函数中：

动画：

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

'Desanimate'：

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

并没有以'desanimate'的方式工作，有些东西效果不好，我真的不知道它是什么。

有人可以帮我一把吗？当我颠倒步数时，可能正在做什么'去风化'不起作用？

示例：

left-to-right
right-to-left

Codepen with old code working just with one side (ex: left or right);

Code pen with new code not working 100% with multiple sides (ex: left to left, left to right, right to right or right to left);

Answer 1

更新了代码集link。请看一下，让我知道它是否符合要求。

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

Css： - 它是正确的500px。所以卡的初始位置是固定的。我根据输入将其更改为动态，每当你正确添加（css）时你必须确保left（css）为null，因为如果你同时给左右两边都会在动画期间得到 confused / LI>
从左到右＆amp;从右到左都有相同的初始和最终位置..所以不需要额外的配件..所以即使你来自下来它也会工作
从左到左＆amp;从右到右，他们的初始和最终位置不一样..所以从左到左在反向循环中会从右向右。我使用反功能

用scrollTop制作动画

1 个答案: