Two if statements. Both work. Only one prints

Question

I'm trying to rotate a fixed image in sync with fullpage.js and it works for the most part.

In order to prevent unwanted rotation I have to stack css rotate() values.

It works when I scroll down and it stacks as I wanted (ie. 180, 360, 540, ..)

It doesn't work when I scroll up.

I tried to use alerts to identify if the calculation is done, there seems to be no problem on the stacking, but scroll up portion of the code simply doesn't print to the HTML document.

Here's my code;

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

The first if statement works perfectly. The second gives the alert I wanted but doesn't print the reduced degree on the html.

Any help would be much appreciated, I'm sure I've done a rookie mistake.

Answer 1

Try this :

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