JQuery plugin switch feature disabled on switch

Question

I have a piece of code where I have two buttons, and when I click one button, I want the div to flip the y axis, and when I click another button, I want the same div to switch along the x axis, this works 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 for the first time nothing happens.

Desired behavior:

Press the y button, flip the div along the y axis.

Press the x button, flip the div along the x axis.

Current behavior:

Press the y button to collapse on the y axis.

press the x button, nothing happens press the x button again to expand on the x axis.

I have no idea what the problem is, this is the best I have received 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

Here you will find 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 must leave flip:change outside of the click event.

Hope this helps you.

Answer 2

You have complicated the problem too much. Here is a solution inspired by the documentation . All you have to do is call flip to change the axis when you click the buttons and listen for the flip:change event, which fires every time you call flip to change the orientation 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 3

As a result, you each time flipped a flip:change event several times. This made x double-click on click after Y double-click. Therefore, nothing seems to be happening.

You can see that this happens when adding a debugger; at the beginning of $('#right').click(function() { and use the console to debug your code.

In any case, adding an event binding only fixes it, as that is all you need.

Removing the entire instance of $("#card").on('flip:change', function() { in your code and adding it only once, fixes the problem.

In this example, I added it at the bottom of the code.

 var ax = 'y'; $(document).ready(function() { $('#card').flip({ trigger: 'manual', axis: 'y' }); $('#left').click(function() { //debugger; if (ax != 'y') { $("#card").flip({ axis: 'y' }); ax = 'y'; } else { $("#card").flip('toggle'); } }); $('#right').click(function() { //debugger; if (ax != 'x') { $("#card").flip({ axis: 'x' }); ax = 'x'; } else { $("#card").flip('toggle'); } }); // Only bind ones. $("#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>