QuickFlip works by using an animation shortcut that is barely noticeable when flipped quickly (hence the name). This shortcut improves performance while allowing the flip effect to work smoothly with any piece of markup regardless of images, backgrounds or CSS.

QuickFlip 2 is now even easier to implement. The new script pulls in and applies the necessary styling, so there is no need to include a QuickFlip stylesheet or to define the dimensions of the panel you’re flipping.

Additionally, QuickFlip’s new version makes triggering the flip effect much simpler due to a new flip function that can be attached to any jQuery selector. Although you can still automatically load the QuickFlip, this new function makes it much easier to attach the flip to click and hover events. Furthermore, the original quickFlip() function can now be chained through any jQuery selector.

First let’s set up our markup. Although QuickFlip 2 works with any number of panels, let’s say you have two panels, both of which are divs. You’ll need to wrap these with something you can target, for instance:

<div class="quickflip-wrapper">
    <div>Front panel content here</div>

    <div>Back panel content here</div>
</div>

While there are a couple ways to attach QuickFlip, let's start with the easiest. First target your wrapper through a jQuery selector and call $.quickFlip():

$(function() {
    $('.quickflip-wrapper').quickFlip();
});

This will initialize the QuickFlip, both attaching necessary CSS and preloading some aspects of the flip animation. Additionally, if there are any nodes with the class 'quickFlipCta' in the panels, QuickFlip will automatically bind the flip animation to their click event . For instance, you could use links to trigger the flip:

<div class="quickflip-wrapper">
    <div>
    <a href="#" class="quickFlipCta">Click to flip front panel</a>
    </div>

    <div>
    <a href="#" class="quickFlipCta">Click to flip back panel</a>
    </div>
</div>

However if you don't want to automatically attach the click event, you can trigger the flip effect manually by targeting the wrapper and calling $.quickFlipper().

$('.quickflip-wrapper').quickFlipper();

With $.quickFlipper() the flip can be called in the function of your choice. Let's say we want to trigger the flip effect on hover:

$('.quickflip-wrapper').hover( function(ev) {
    $(ev.target).quickFlipper();
});

Be careful with $.quickFlipper() and your selector if you are using multiple QuickFlips on a page. If $('.quickflip-wrapper') targets more than one QuickFlip, $('.quickflip-wrapper').quickFlipper() will trigger them all to flip, so target QuickFlips individually for flipping through a unique class, id, etc.

Finally the $.quickFlipper() function makes things even easier from a Javascript perspective, since it will initiate the QuickFlip if it is called on a piece of markup that hasn't been preloaded. This means that you can avoid pre-defining a flip event with the $.quickFlip() function and just call $.quickFlipper() when you need it. However this method runs a little slower on the first flip and also requires that you attach a bit of CSS—position: relative; for the main wrapper and position: absolute; for the interior panels, or else they will show up stacked until $.quickFlipper() is fired.

Customizing QuickFlip

QuickFlip 2 provides a number of customizable options that can be passed to both $.quickFlip() and $.quickFlipper(). In either case the options are passed as an object in the first argument, for example:

$('.quickflip-wrapper').quickFlip({
    closeSpeed : 200,
    openSpeed : 150
});

Here we are setting two options, the closeSpeed and openSpeed which control the speeds of the flip animation.

Alternately, we could pass these options to the $.quickFlipper(); function, which will overwrite any set by $.quickFlip(). For instance if we want to trigger a flip that overwrites the closeSpeed we defined above, we'd write:

$('.quickflip-wrapper').quickFlipper({
    closeSpeed : 100
});

A handful of other options exist: we can control panel dimensions using panelWidth and panelHeight, incorporate the jQuery easing plugin using easing, and cause the flip animation to refresh with each flip using refresh. For more details check the QuickFlip docs.

Finally, the $.quickFlipper() function can also accept a few more arguments—one to control the next panel displayed and another to allow repeating of the flip animation.

For instance if we wanted to trigger a flip to show the third panel in a QuickFlip wrapper, we'd pass its index to $.quickFlipper():

$('.quickflip-wrapper').quickFlipper( {}, 2 );

There are two things to notice here. First we passed an empty object ({}) to the options argument because we don't want to overwrite any options, then passed 2 as the panel index (since the indexes start with 0, the third panel's index is 2).

Finally, we can pass an integer to the repeater argument in $.quickFlipper():

$.('.quickflip-wrapper').quickFlipper({}, null, 3);

Here we have again passed an empty object to the options argument and also are passing null for the nextPanel argument so QuickFlip can determine the next panel automatically. Finally we passed 3 to the repeater function, which will cause the QuickFlip to fire 3 times in a row. Alternately if we wanted to spin the object indefinitely, we could pass -1 here.