jQuery flip plugin switch function fails on switch

Question

I have a piece of code where I have two buttons and when I press one button I want a div to flip on the y-axis and when I press the other button I want the same div to flip on the x-axis. this works just fine when I use the button for the y-axis even if the previous flip was on the x-axis. But when I want to switch from the y-axis to the x-axis I need to press the x button twice because the first time nothing happens.

So desired behavior is:

click y button flip the div on the y-axis.

click x button flip the div on the x-axis.

current behavior is:

click y button div flips on the y-axis.

click x button nothing happens click x button again div flips on the x-axis.

I have no idea what the problem is, this is the best i got so far. All help is appreciated.

var ax = 'x';
$(document).ready(function() {

  $('#card').flip({
    trigger: 'manual',
    axis: 'x'
  });
  $('#left').click(function() {
    if (ax != 'y') {
      $("#card").flip({
        axis: 'y'
      });
      $("#card").on('flip:change', function() {
        $('#card').flip('toggle');
      });
      ax = 'y';
    } else {
      $("#card").flip('toggle');
    }
  });
  $('#right').click(function() {
    if (ax != 'x') {
      $("#card").flip({
        axis: 'x'
      });
      $("#card").on('flip:change', function() {
        $('#card').flip('toggle');
      });
      ax = 'x';
    } else {
      $("#card").flip('toggle');
    }
  });
});

#card {
  position: fixed;
  left: 50px;
  top: 50px;
  width: 200px;
  height: 200px;
}

.front {
  width: 100%;
  height: 100%;
  background-color: red;
}

.back {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button id="left">y</button>
<button id="right">x</button>
<div id="card">
  <div class="front">Front content</div>
  <div class="back">Back content</div>
</div>

Answer 1

You over-complicated the problem. Here is a solution inspired by the documentation. All you have to do is to call flip to change the axis on click on he buttons, and to listen on flip:change event which is fired every time you call flip to change the orientation in order to actually flip it.

// Configure it to be manually flipped
$("#card").flip({
  trigger: 'manual'
});

// Change the axis
$('#left').click(function() {
  $("#card").flip({
    axis: 'y'
  });
});

$('#right').click(function() {
  $("#card").flip({
    axis: 'x'
  });
});

// Toggle it on change
$("#card").on('flip:change', function() {
  $('#card').flip('toggle');
});

#card {
  position: fixed;
  left: 50px;
  top: 50px;
  width: 200px;
  height: 200px;
}

.front {
  width: 100%;
  height: 100%;
  background-color: red;
}

.back {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>

<button id="left">y</button>
<button id="right">x</button>

<div id="card">
  <div class="front">Front content</div>
  <div class="back">Back content</div>
</div>

Answer 2

Here you go with a solution

var ax = 'x';
$(document).ready(function() {

  $('#card').flip({
    trigger: 'manual',
    axis: 'x'
  });
  
  
  $("#card").on('flip:change', function() {
    $('#card').flip('toggle');
  });
  
  $('#left').click(function() {

    if (ax != 'y') {
      $("#card").flip({
        axis: 'y'
      });
      
      ax = 'y';
    } else {
      $("#card").flip('toggle');
    }
  });
  $('#right').click(function() {
    if (ax != 'x') {
      $("#card").flip({
        axis: 'x'
      });
      
      ax = 'x';
    } else {
      $("#card").flip('toggle');
    }
  });
});

#card {
  position: fixed;
  left: 50px;
  top: 50px;
  width: 200px;
  height: 200px;
}

.front {
  width: 100%;
  height: 100%;
  background-color: red;
}

.back {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button id="left">y</button>
<button id="right">x</button>
<div id="card">
  <div class="front">Front content</div>
  <div class="back">Back content</div>
</div>

You should keep the flip:change outside the click event.

Hope this will help you.