jQuery QuickFlip 2
jQuery QuickFlip takes any piece of HTML markup and flips it over like a card. The effect is similar to the UI animation on the iPhone
jQuery QuickFlip 2
I’m happy to announce the release of QuickFlip 2, a major reworking of the jQuery plugin that flips any piece of HTML markup over like a card. The new version is faster and even easier to use—simply call the flip animation through a jQuery selector and the QuickFlip will flip the front panel to show its back.
Download QuickFlip 2 for jQuery
Read the QuickFlip documentation
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.
It provides an attractive alternative to other slower and more resource heavy Flash and jQuery flip animations. However if you want a smoother option with a depth effect try jQuery Flip!, although this only works with background colors (not images) and hides the panel content before flipping.
What’s new in QuickFlip 2?
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.
Finally, the QuickFlip plugin has been performance-tuned and is running pretty quickly (example here) and namespacing issues with other Javascript libraries and a conflict between IE8 and jQuery 1.3.2 have been resolved.
QuickFlip Examples
A ton of QuickFlips with a hover effect
How to use QuickFlip 2
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 (See the docs for customizing this selector). 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.
Check out the QuickFlip docs for more info
Jon Raasch is a UX nerd and free-lance web designer / developer who loves jQuery, Javascript & CSS.
Wow, new version for Flipping plugin I just want to try prev version. Thanks for sharing
very cool!
The demos do not appear to work correctly in Google Chrome. . . It looks very promising however!
Hi Warvin,
The QuickFlip demos are working for me in Chrome 3.0.194.3 for Mac. Which version are you using?
Thanks for the feedback,
jr
This is really terrific! Is there anyway you could show a demo of the hover effect using images? I tried to accomplish this without bugging you and ran into problems because the hovering eventually fails if I hover over the thing too many times. I think I’m not quite understanding your explanation of how to utilize .quickflipper.
I think many of us we are losing interest in Flash
Why?
Great poast, and a great plug-in! I can think of loads of uses for this!
Looks really smooth too.
Thanks.
Can you make the flip vertical ?
wow cooooooooooool
Hi Andrew,
I haven’t programmed the vertical flip yet, but it’s on its way in QuickFlip 2.1
-jr
Safari 3.2.3 on Mac OS X 10.5.7 : Not OK
FF 3.5.1 on Mac OS X 10.5.7 : OK
Opera 9.64 on Mac OS X 10.5.7 : OK
working fine in safari 4
also IE 6/7/8
Nice work Jon. I like this jQuery plugin! It’s pretty slick. I found it while looking for page flipping code for say a magazine to turn pages and such. I wonder if you will eventually grow this into such a system. Each flip is different content. If flipped on the right it does one page/div, if flipped on the left it does another div.
But, for now. I think your advantage is this is cool, fast, and efficient. Good job.
-Dustin
great Work.. I was looking for something like this ..
Quick question.. How do I trigger to automatically fip the page since I am actually loading a external page . So that evey refesh of the page triggers a quickflip..
I am doing this …
var refreshId = setInterval(function()
{
$(‘#responsecontainer’).load(‘dymanicdata.html’).quickFlip();
}, 10000);
Loading….
Hello, I’m excited to see that the new one is out.. I have not gotten the hover over out to work in IE but it does work in FF… Here is what I have
$(‘.quickFlip’).quickFlip();
$(‘.quickFlip’).hover(function() {
$(this).quickFlipper({refresh :1});
},function() {
$(this).quickFlipper({refresh :1});
});
});
Here is the test page for it… Any ideas on what would be going on? It flips twice and only show right 50% of the time in IE… little lost on why… Great stuff 😀
Cheers
jeremyBass
Hello again so I still have a few issues and I have tried many things. The big issue, which you example http://dev.jonraasch.com/quickflip/examples/hover-quickflips
as shows, is that in Safari 3.1.2 (win-Vista/XP) the top panel shows two of them side by side when they should be hidden… any ideas?
Cheers
Jeremy
Hi Jeremy,
I am aware that there are issues with QuickFlip in Safari 3, however I have no plans of resolving them considering that Safari 4 has been released (where it works just fine), Safari is a fairly minor browser (~4% market share still), and Safari users (who are primarily on Mac) tend to upgrade quickly due to the internal Mac dialogue.
Hope it isn’t a deal breaker for you.
Best,
Jon
Hey Jon, Thanks for getting back to me. I was just reporting like a good little tester, so this is all good news here… I always aim for 99% usability so if Safari 3 is going away quickly then that is just a fraction so oh well… I know I have another error to report, but it’s at the office and I don’t remember what it is fully.. I’ll get back.. Thanks for the help… Great stuff… Cheers
Jeremy
Fantastic effect! I have a question though: I noticed when I use it with a dynamically-created card object, the background image disappears during the transition. The Code below uses your card images. Any ideas?? thX
test.js:
var card = function() {
// define the clock
var qf = document.createElement(“DIV”);
qf.className = ‘quickFlip’;
qf.style.height = ‘216px’;
qf.style.width = ‘322px’;
document.getElementById(‘cardhere’).appendChild(qf);
var blackpanel = document.createElement(“DIV”);
blackpanel.style.textAlign = ‘center’;
blackpanel.style.background = ‘url(flip-panel-brown.png) no-repeat’;
blackpanel.style.position = ‘absolute’;
qf.appendChild(blackpanel);
var backanchor = document.createElement(“A”);
backanchor.href = “javascript:;”;
backanchor.id = “backLink”;
backanchor.className = “quickFlipCta”;
backanchor.appendChild(document.createTextNode(“To Back”));
blackpanel.appendChild(backanchor);
var redpanel = document.createElement(“DIV”);
redpanel.style.textAlign = ‘center’;
redpanel.style.background = ‘url(flip-panel.png) no-repeat’;
redpanel.style.position = ‘absolute’;
qf.appendChild(redpanel);
var frontanchor = document.createElement(“A”);
frontanchor.className = “quickFlipCta”;
frontanchor.href = “javascript:;”;
frontanchor.id = “frontLink”;
frontanchor.appendChild(document.createTextNode(“To Front”));
redpanel.appendChild(frontanchor);
this.init();
}
card.prototype.init = function() {
// initialize the flipping mechanism
$(‘.quickFlip’).quickFlip({
closeSpeed : 1100,
openSpeed : 1100
});
};
test.html:
var mycard = new card();
there is problem in using inside(nesting) . probebly we have to look into var flipid=$(this).attr(‘id’).substr(4);
Hi Kiran,
I haven’t experienced the issue you’re talking about in either version of QuickFlip but I can tell from the code bit you referenced that you are using QuickFlip 1, which I am no longer supporting. Please upgrade to QuickFlip 2 – it should be relatively easy if you aren’t doing anything too complex with the original script. QuickFlip 2 is a major improvement over QuickFlip 1 that makes the latter obsolete.
If you can’t upgrade and still have problems, please feel free to post in the comments for the original QuickFlip, and hopefully someone will address your issue, however I am no longer supporting that version of the plugin.
Thanks for reading,
jr
Can you make it flip vertically?
Hi,
great peace of code! Got a quick question: I have multiple panels on my page, which can be flipped with a “Click to flip panel”-Link. How do I manage to close all turned Panels with a single click on a specified link?
I could not find out how to get the “flip-states” for all the panels to flip only the turned ones.
Is there an easy way to do it?
I would appreciate if there would be a solution for this…
Thanks!
Mike
Jon – thanks a ton for this. It has completely fixed the problems I was having in IE8 with the prior version. I’ve just been sitting flipping the card backwards and forwards for a few minutes now 🙂
Hehe glad you like it Andy! And very glad it cleared up that nasty IE8 issue in QuickFlip 1…
The whole thing is just a lot cleaner and easier to use (if I do say so myself hehe)
Thanks for reading,
jr
Jon, Thank you for a great job.
I love this simple and cool effect very much.
But, I changed this script a little for my project.
It’s about the windows.resize event used in this script.
This re-set flips handling makes the browser very slow,
though, this must not be removed if the page’s width is not fixed.
I cant use this script without turning off this resize event.
It sometimes freezes the browsers even if it is google chrome.
I recommend you to add the option to turn off this resize event.
This is not necessary if we use fixed width page.
Jon
Ok, here is my problem. The flipcards (3 of them) work perfectly across all browsers. The problem is that I have them in a jQuery Slider that opens and closes. This works great in all browsers except, you guessed it, IE lesser than 8. It works in ie8 without compatibility. What happens is that the 3 flipboxes do not hide in IE when the slider is closed. This does not seem to be a z-index issue, but rather a display: issue or something like it.
My question is… How do I hide the fliboxes in IE when the slider is closed?
Please help!
Regards
Jacques
Jon, this is great, but I am with Takazudo. Can you explain any problems that might occur by disabling the window.resize function? I did this and everything seems to work much better…am I setting myself up for failure?
Cheers!
Dan
Great script! thanks a bunch. I have two quick questions about this site i am developing
http://www.vincentdepalma.com/testing/ronwilsondesigner/news.html
Once the images are flipped, how can i adjust the padding inside the box?
I seem to have lost the hand cursor on the Flip Back < text, any ideas how to remidy this?
Much thanks to anyone who can help!
-Vince
How about the code minified?
thank you so much!!
When utilizing QuickFlip2, is it possible to have the script return to the original state, automatically, after x seconds? (i.e. Page opens, front panel content is displayed. User hovers on front panel, and content flips to back panel. User mouses out, content stays on back panel content for 15 seconds, and then flips back to front panel content.)
@Takazudo and @Dan Meehan – The widow resize event adjusts the dimensions of the quickflip panels which can become unaligned if using percentage based widths in CSS that are effected by the window size. I’ll work in a variable to turn this off and on soon (however I will most likely have it default to on).
@W. Shawn – Minified version is now included with the QuickFlip download: http://dev.jonraasch.com/quickflip/download – I reworked a bit of the codebase to be more friendly to the YUI compressor, and the filesize of the minified version is now 4kb :).
@brokenone – You’ll have to write a little bit of JS, but QuickFlip has all the utilities you need to make this happen. You’ll want to use the $.quickFlipper() method to trigger the flip manually, and attach that to a timeout. If you are using two panels that should be all you need, however if you have 3 or more you’ll have to be a bit more careful and pass the appropriate panel index to the quickFlipper() method.
Check out the documentation (http://dev.jonraasch.com/quickflip/docs) for more info.
QuickFlip 2.1 is released! http://dev.jonraasch.com/quickflip/download This update addresses a number of feature requests and provides a sizable performance boost.
@Andrew – Now you can flip content horizontally as well as vertically – to flip vertically pass the option
vertical : true.@Takazudo + @Dan Meehan – A switch has been built in to disable the window resize event – pass
noResize : truein the options.Other than that a portion of the script was eseentially rewriting jQuery’s
clone()method (and pretty poorly I might add :)). This has been replaced with theclone()method for a noticeable performance increase, especially in IE 7.I tested 2.1 in most browsers and in a variety of situations but please let me know if anything comes up.
Best,
Jon
Hi.
Great plugin.
A quick question. Is there anyway for me to put the plugin in loop? I mean, keep flipping every x seconds automatically.
Best,
Daniel
This is such a good plug-in, and just what I’m after! There’s one thing I can’t quite figure out. I have a a page with about 12 panels on. I’m trying to get the panel to automatically switch back after mouse over so that only one panel is ever open at a time.
the code I’m using is:
$(function() {
// for performance first init the quickFlip
$(‘.quickFlip’).quickFlipper();
// set up a hover effect for each of the quickflip wrappers
for ( var i = 0; i < $.quickFlip.wrappers.length; i++ ) {
var thisOne = $.quickFlip.wrappers[i];
$( thisOne.wrapper ).hover( function(ev) {
var $target = $(ev.target);
// make sure it isn't a child node
if ( !$target.hasClass('quickFlip') ) $target = $target.parent();
$target.quickFlipper();
},
function(ev) {
var $target = $(ev.target);
// make sure it isn't a child node
if ( !$target.hasClass('quickFlip') ) $target = $target.parent();
$target.quickFlipper();
});
}
});
However it can be a little bit temperamental, when hovering over panels at speed.
is there a better way to achieve this effect?
Many Thanks
can anyone help with the above?
Thanks
Hi, how can i apply your great plugin on a wordpress site ? anybody try it ?
Byeee 😀
Jon,
This is a fantastic plugin. I’ve used it as the basis for a concentration-style matching game called MatchTheMemory.com. Keep up the good work!
Wow Jon – this is awesome! I was googling “flip” effect and I was thinking about “slicing” content and re-positioning. Then I found your post, with a plugin, no less . Thanks for sharing! x
@joselo Can just download it, put it on your server and link to it from your header.php file in tag? Perhaps I’m missing something… x
Excelente!!! Very good!!!
you rock, you roll, you satisfy my soul! Cheers for the coolness.
Giving it an inner wrapper gives an error. The inner wrapper is between panel 2 i.e.
My content
The styles for innerpanel I have tried are just padding then adding width and height. I have also added the width and height options to the quickFlip function. The error is that if you click on the text in panel 2 it then just flips the text not the panel. If you click on the panel it works but only if you haven’t first clicked on the text first.
I have tested this on Safari 4 and Firefox 3.5.9 on Mac
This is a serious problem because I have to be able to give padding to the content.
If there a work around or I am doing something wrong which someone knows then please let me know. Thanks.
P.S. In your basic example if you remove the quickFlipCta link and make the click on the whole panel you will see what I mean.
It would be nice to have an option where if there are multiple panels to only have one open at one time so if you click on one to show the second panel and then on another the first one closes automatically.
Jon,
I think this is a pretty neat plugin.
While I was using it, there was one thing in particular I noticed that I thought would be nice.
Stock jQuery animations have an optional callback parameter, so you can have something happen after the the animation is finished. QuickFlip2 doesn’t seem to have this. I worked around this by wrapping my calls to $.quickFlipper in a function like this:
function flip_with_callback(callback)
{
$('.quickflip').quickFlipper();
window.setTimeout(callback, 180);
}
This function is specific to my application, but could be generalized so that an optional callback could be called after each flip.
Great plugin!
I did find a slight problem with the demos. This happens on Chromium, Fairefox and Safari (I have not been able to test in Internet Exploder). The divs do not display correctly on load and the “flip” effect acts very strangely. This happens on the demo that I downloaded, and also on your example pages, but it works fine on this page.
On further inspection, it seems that if the css files are not loaded first, then the page does not render the way it should. I do not know if anyone else has experienced the same thing.
Once I moved the css declarations above the javascript references, everything works perfectly!
Hope this helps!
Hi, very much like your plugin, however I have found a little quirk which gets triggered on Opera 10, Safari 5, FF 3.6 and Chrome on Mac.
Basically if you set your browser to any width and trigger the first ‘flip’on one of your panels, then re size your browser, then try to flip the same object, it ‘double flips’ I think is the best way I can put it, and lands back on the second side again.
Is there a chance you could look at a fix for this?
Thanks!
This plugin is fantastic. I’m new to jQuery, so sorry if this is a dumb question:
How do I get the hover state to react like a normal :hover? ie: when the mouse leaves, the element returns to its normal state?
Cheers
chrome 8.0.xxx issue solved:
if you put: link rel=”stylesheet” type=”text/css” href=”css/basic-quickflips.css”
before the: script src=”../jquery.js” type=”text/javascript” /script
(or before any script loading selector