两个 if 语句。两者都有效。只有一张印

Question

我正在尝试与 fullpage.js 同步旋转固定图像并且它在大多数情况下都有效。

为了防止不必要的旋转，我必须堆叠 css rotate() 值。

当我向下滚动时它会起作用，它会按我想要的方式堆叠（即 180、360、540，..）

向上滚动时不起作用。

我尝试使用警报来识别计算是否完成，堆叠上似乎没有问题，但向上滚动部分代码根本不会打印到 HTML 文档。

这是我的代码；

var rotation = 0,
    rotationInc = 180,
    miniLogo = $('#mini-logo');

$(document).ready(function () {
  $('#home').fullpage({
    verticalCentered: false,
    scrollingSpeed: 300,
    onLeave: function (index, nextIndex, direction) {
      if (direction == 'down') {
        rotation += rotationInc;

        setTimeout(function () {
          miniLogo.addClass('enlarge');
        }, 400);

        miniLogo.each(function () {
          alert(rotation);
        });

        setTimeout(function () {
          miniLogo.css({
            'transform': 'rotate(' + rotation + 'deg)'
          });
        }, 800);

        setTimeout(function () {
          miniLogo.removeClass('enlarge');
        }, 1200);
      }

      if (direction == 'up') {
        rotation -= rotationInc;

        setTimeout(function () {
          miniLogo.addClass('enlarge');
        }, 400);

        miniLogo.each(function () {
          alert(rotation);
        });

        setTimeout(function () {
          miniLogo.css({
            'transform': 'rotate(' + rotation + 'deg);'
          });
        }, 800);

        setTimeout(function () {
          miniLogo.removeClass('enlarge');
        }, 1200);
      }
    }
  });
});

第一个 if 语句运行良好。第二个给出了我想要的警报，但没有在 html.

上打印降低的程度

非常感谢任何帮助，我确定我犯了一个菜鸟错误。

Answer 1

试试这个：

rotation = 0;
rotationInc = 180;
miniLogo = $('#mini-logo');

$(document).ready(function () {
  $('#home').fullpage({
    verticalCentered: false,
    scrollingSpeed: 300,
    onLeave: function (index, nextIndex, direction) {

    var rotation = (direction == 'down') 
        ? rotation += rotationInc
        : rotation -= rotationInc;

        setTimeout(function () {
          miniLogo.addClass('enlarge');
        }, 400);

        miniLogo.each(function () {
          alert(rotation);
        });

        setTimeout(function () {
          miniLogo.css({
            'transform': 'rotate(' + rotation + 'deg)'
          });
        }, 800);

        setTimeout(function () {
          miniLogo.removeClass('enlarge');
        }, 1200);
      }
    }
  });
});

两个 if 语句。两者都有效。只有一张印

Two if statements. Both work. Only one prints

html

javascript

css

jquery

fullpage.js