CODEWITHSUNDEEP
javascriptjqueryloopstransformationrepeat
K Ghumaan
K Ghumaan

Reputation: 97

Continuous Jquery rotation transfer?

I have two buttons which are located on opposite sides of a form ("Next" on front, "Submit" on back). The buttons perform the rotation (180deg) correctly, however, they only work for one click each. In other words, the onClick command only works once per click. Is there any way for me to reset my transformation in order repeat my rotation on click infinitely?

<script type="text/javascript">
  $(document).ready(function() {
    $("input[name='next']").on("click", function() {
      // console.log( "The NEXT Button Worked!" );
      $(".form").css("transform", "rotateY(180deg)");
    })
    $("input[name='back']").on("click", function() {
      // console.log( "The BACK Button Worked!" );
      $(".formFlipAgain").css("transform", "rotateY(180deg)");
    })
  });



  function showBack() {
    setTimeout(function() {
      document.getElementById("backSide").style.display = "block";
    }, 600);
    setTimeout(function() {
      document.getElementById("frontSide").style.display = "none";
    }, 600);
  };

  function showFront() {
    setTimeout(function() {
      document.getElementById("frontSide").style.display = "block";
    }, 600);
    setTimeout(function() {
      document.getElementById("backSide").style.display = "none";
    }, 600);
  };

Upvotes: 0

Views: 51

Answers (1)

nicael
nicael

Reputation: 18995

Introduce two flags.

var flag1=0;
var flag2=0
$(document).ready(function() {
  $("input[name='next']").on("click", function() {
    // console.log( "The NEXT Button Worked!" );
    $(".form").css("transform", "rotateY("+flag1?0:180+"deg)");
    flag1=!flag1;
  })
  $("input[name='back']").on("click", function() {
    // console.log( "The BACK Button Worked!" );
    $(".formFlipAgain").css("transform", "rotateY("+flag2?0:180+"deg)");
    flag2=!flag2;
  })
});

Upvotes: 1

Related Questions