jQuery Flip _^v1.0.19

A lightweight jQuery plugin to create 3d flip animation. See the project page

Getting Started

CDN

https://cdn.rawgit.com/nnattawat/flip/v1.0.19/dist/jquery.flip.min.js

Download

• [jquery.flip.js][max] (development version, commented ~9kB)
• [jquery.flip.min.js][min] (production version, minified ~4kB, gzipped ~2kB)
• [jquery.flip.min.js.map][map] (source map, ~5kB) [max]: https://cdn.rawgit.com/nnattawat/flip/v1.0.19/dist/jquery.flip.js [min]: https://cdn.rawgit.com/nnattawat/flip/v1.0.19/dist/jquery.flip.min.js [map]: https://cdn.rawgit.com/nnattawat/flip/v1.0.19/dist/jquery.flip.min.js.map

Bower

bower install flip

Usage

In your web page:

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

<script src="jquery.js"></script>
<script src="jquery.flip.js"></script>
<script>
$(function($) {
  $("#card").flip(); 
});
</script>

Documentation and Example

Please refer to the project website

Development

Ensure that you have the latest Node.js and npm installed.

Test that Grunt's CLI and Bower are installed by running grunt --version and bower --version. If the commands aren't found, run npm install -g grunt-cli bower. For more information about installing the tools, see the getting started with Grunt guide or bower.io respectively.

To run the demo locally, do the following.

npm install
bower install

And run grunt command to create files in /dist folder.

grunt

What's new

• 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

• Flip v1.0.13

  • Added ability to change 'reverse' dynamically

• Flip v1.0.12

  • v1.0.11 Not working in Firefox
  • Simplified callback

• Flip v1.0.11

  • Added a callback that fires when flip animation is finished

• Flip v1.0.10

  • Removed log statement
  • Updated license and credits
  • Fixed indentation

• Flip v1.0.9

  • Added support for custom front/back face selectors #27

• Flip v1.0.8

  • Added support for the mobile tap event
  • Dynamic sized content by default while maintaining backward compatibility
  • Now available with source map for better debugging support.

• Flip v1.0.7

  • Improved backward compatibility

• Flip v1.0.6 This version adds new features and fixes some issues compared to the original flip:

  • Added support for flippable content with dynamic height/width #17
  • Added ability to change axis arbitrarily #1
  • Flip prevents bubbling of click on 'button, a, input[type="submit"], breaking e.g. Swipebox #14
  • Flickering animations of elements in flipped content. #16

• Flip v1.0.2 - v1.0.5 Chaotic period of development culminating in v1.0.6 see above.