jQuery Flip _^v1.0.18

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

What's new

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
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
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:
Flip v1.0.2 - v1.0.5 Chaotic period of development culminating in v1.0.6 see above.

Getting Started

CDN

https://cdn.rawgit.com/nnattawat/flip/v1.0.18/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.18/dist/jquery.flip.js [min]: https://cdn.rawgit.com/nnattawat/flip/v1.0.18/dist/jquery.flip.min.js [map]: https://cdn.rawgit.com/nnattawat/flip/v1.0.18/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

Yu-Qi/flip

jQuery Flip v1.0.18