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