jQuery翻转插件切换功能在开关上失败

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.

Answer 3

You ended up binding the flip:change event multiple times with each click. That caused x to flip twice when clicked after Y was clicked twice. Hence it looks like nothing is happening.

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

Anyway, adding the event binding ones only fixes it as that is all you need.

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

In this example I added it at the bottom of your 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>