Flip Div Effect On Click Button – jQuery Flip

File Size:1.64 KB
Views Total:1,179
Last Update:December 26, 2017
Publish Date:December 26, 2017
Official Website:Go to website
License:MIT

This post is showing button click on  Show div flip effect with front & back visible data. i am use the jQuery flip.js flipping a simple div effect (transitions and 3d transforms). you can rotate or flip div with help of jQuery flip. this is very helpful plugin and light weight plugin easy to use.

How It Use :

1.  Use and include the files into your Jquery install path :

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>

2. Use simple Html code :

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

3. Use Jquery flip Script in Jquery Script :

<script type="text/javascript">
    $(document).ready(function() {
        $("#card").flip({
              axis: 'y',
              reverse: true,
              trigger: 'manual'
            });
        $('#click_me').click(function(){
                $("#card").flip(false);
                  $("#click_me2").removeClass("btn-success");
                  $("#click_me").addClass("btn-success");
        })
        $('#click_me2').click(function(){
               $("#card").flip(true);
               $("#click_me2").addClass("btn-success");
               $("#click_me").removeClass("btn-success");
        })
       
    
       });  
</script>

Done 🙂

Change Log

Flip V1.1.2

Fix #94

Flip v1.1.1

Being more string on overridden options

This fixes #89

Flip v1.1.0

Refactor! Wrap all APIs into Object and attach to DOM as .data('flip-model')

Flip v1.0.20

  • Fix transition lost in Edge IE11

Flip v1.0.19

  • Add .flap namespace to all flip events

Flip v1.0.18

  • Fixed Missing comma in package.json #64
  • Thanks to Zlatko Fedor for reporting and fixing this!

Flip v1.0.17

  • Fixed Missing "main" and "ignore" entry in bower.json #50
  • Fixed Use jQuery ~2.0 in bower.json #51
  • Thanks to Razvan Popa for reporting and fixing these!

Flip v1.0.16

  • Made Flip Idempotent, meaning it won't hurt if you call it more than once on the same element. Fixes Not working after ajax refresh #40.
  • Fixed a rendering glitch in Chrome and Opera. Back face always visible on Chrome #39.

Flip v1.0.15

  • Hid backface for all children, fixing #31

Flip v1.0.14

  • Added missing jQuery dependency
  • Fixed scoping issues
  • Added support for jquery event