Два заявления. Оба работают. Только одна печать

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

Первое, если заявление работает отлично. Второй дает предупреждение, которое я хотел, но не печатал уменьшенную степень на 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); 
     } 
    } 
    }); 
});