Javascript 两个if语句。两者都有效。只有一张照片

我正在尝试与

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上打印降低的程度

任何帮助都将不胜感激，我确信我犯了一个新手错误。

试试这个：

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

---

你能解释一下错误在哪里吗？只是角度旋转还是其他什么？@Kevorkian这是我第一次尝试的。旋转度需要上下叠加，以便在每次从

fullpage.js

传递方向时实现旋转动画，因为有许多幻灯片/部分。当向下滚动时，您的代码只会设置一次动画，然后停止设置动画，而且它会从

180deg

下降到

-180deg

，导致它在向上滚动时设置整个

360deg

的动画。@shiri错误是，向上滚动时，它不会更新内联css，这导致没有动画。除此之外，它的行为符合我的要求，我猜它有

miniLogo.css（{'transform'：'rotate（'+rotation+'deg'）不知怎么搞砸了。@Kovarkian谢谢！虽然不是缺少的
而是添加了
miniLogo.css（{'transform'：'rotate（'+rotation+'deg'）}）结尾处的code>。这是完全一样的，我已经接受了你的答案，因为它导致了这次对话。