2つのif文。どちらも動作します。 1枚しか印刷されません。

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ステートメントは完全に機能します。 2番目は、私が望んでいた警告を出しますが、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); 
     } 
    } 
    }); 
});