QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler

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

Click to flip panel

jQuery QuickFlip 2

Click to flip panel

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.

Download QuickFlip 2

QuickFlip Examples

Basic QuickFlip example

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.

Download QuickFlip 2

QuickFlip documentation

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

Download QuickFlip 2



Jon Raasch

Jon Raasch is a UX nerd and free-lance web designer / developer who loves jQuery, Javascript & CSS.




You Might Also Like:


94 Comments to “QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler” RSS 2.0

  1. Abu Farhan says:

    Wow, new version for Flipping plugin I just want to try prev version. Thanks for sharing

  2. scupper says:

    very cool!

  3. Warvin says:

    The demos do not appear to work correctly in Google Chrome. . . It looks very promising however!

  4. Jon Raasch says:

    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

  5. Rubycat says:

    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.

  6. JChristian says:

    I think many of us we are losing interest in Flash …
    Why?

  7. Kev says:

    Great poast, and a great plug-in! I can think of loads of uses for this!
    Looks really smooth too.
    Thanks.

  8. Andrew says:

    Can you make the flip vertical ?

  9. bosdumia says:

    wow cooooooooooool

  10. Jon Raasch says:

    Hi Andrew,

    I haven’t programmed the vertical flip yet, but it’s on its way in QuickFlip 2.1

    -jr

  11. Peter says:

    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

  12. Jon Raasch says:

    working fine in safari 4
    also IE 6/7/8

  13. Dustin says:

    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

  14. 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….

  15. jeremyBass says:

    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 :D

    Cheers
    jeremyBass

  16. jeremyBass says:

    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

  17. Jon Raasch says:

    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

  18. jeremyBass says:

    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

  19. jrforbes says:

    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();

  20. kiran says:

    there is problem in using inside(nesting) . probebly we have to look into var flipid=$(this).attr(‘id’).substr(4);

  21. Jon Raasch says:

    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

  22. Jonathan says:

    Can you make it flip vertically?

  23. Mike says:

    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

  24. Andy says:

    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 :)

  25. Jon Raasch says:

    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

  26. Takazudo says:

    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.

  27. 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

  28. Dan Meehan says:

    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

  29. Vince says:

    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

  30. W. Shawn says:

    How about the code minified?

  31. kerk09 says:

    thank you so much!!

  32. brokenone says:

    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.)

  33. Jon Raasch says:

    @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 :) .

  34. Jon Raasch says:

    @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.

  35. Jon Raasch says:

    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 : true in 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 the clone() 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

  36. Daniel says:

    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

  37. Alastair says:

    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

  38. Alastair says:

    can anyone help with the above?

    Thanks

  39. joselo says:

    Hi, how can i apply your great plugin on a wordpress site ? anybody try it ?

    Byeee :D

  40. Curtis Gibby says:

    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!

  41. Rachel says:

    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

  42. Rachel says:

    @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

  43. Excelente!!! Very good!!!

  44. buz says:

    you rock, you roll, you satisfy my soul! Cheers for the coolness.

  45. Peter says:

    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.

  46. Peter says:

    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.

  47. Peter says:

    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.

  48. Carl Waldbieser says:

    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.

  49. Don Milton says:

    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!

  50. Rob Palmer says:

    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!

  51. sambo says:

    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

  52. absent says:

    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 <script src=…..)
    it will work perfect in chrome 8.x.
    thx for sharing!

  53. rene says:

    i have a great problem with the script in the multiflip variant
    the script works, but the performance is more than bad
    try to resize the browser window
    in FF it slows down extremly
    in IE it breaks down

    http://dev.jonraasch.com/quickflip/examples/hover-quickflips
    the demosite has 50 flipping elements, on my customer site there are 15 elements and it is also a not acceceptabe speed for interactive resizing the window…

    any hints for using this script without blocking the resizing of the browser window ???
    otherwise i have to use flash :(

  54. rene says:

    sorry for posting my problem… now i’ve found the noResize option and modified the default status in the JS, and now it works !!!

  55. Matthew says:

    Quickflip 2 is awesome, but I’ve found that it conflicts with the Colorbox JQuery plugin. Colorbox uses the rel attribute on a hyperlink to group images into slideshows. Unfortunately, when the Quickflip JS is included in a page with a Colorbox gallery, Colorbox breaks when using the rel attribute.

    If rel attributes are removed, Colorbox works again, but images can only be viewed individually, and not grouped together into a slideshow.

    Any ideas?

    Thanks,
    Matt

  56. Boo says:

    Hello,
    Wonderful plugin Jon!

    Question:
    Is there a way to change the image of the flipping element dynamically after every click. I would like to let the user pick randomly a playing card. I think I have to implement this with the QuickFlipper, but I don’t succeed. Any clue?

    Thanks,

    Boo

  57. tan says:

    Hi!
    I needed callback after the animation is done (similar to what Carl required). I could do it with the following code in the flip method:

    //stop if is last flip, and attach events for msie
    case 1:
    // begin my changes
    if(options.endCallback) {
    options.endCallback();
    }
    // end my changes
    break;

    And then, I do the flip by passing a custom option like:
    $(‘.quickFlip’).quickFlipper({
    endCallback: flipEndCallback
    }, null, 11);

    Function flipEndCallback gets called at the end of all the flips (11 in this case).

    I’ve found this plugin very useful.
    Thanks!
    Tan

  58. Bill Ortell says:

    nice work jon -
    been playing with your plugin now off-n-on for a few weeks and bcz of Carl and Tan’s comments was able to incorporate the necessary items to make this humm…

    @Carl – thanks – good start

    @Tan – mucho thanks – cuz when starting to add timeouts, inevitbly faster/slower becomes an issue

    @Jon – *awesome* plugin!

  59. Jman says:

    How do you do the mouse out to revert back to the first panel? I tried several things, but I am missing something…

  60. Neil says:

    This seems to be exactly what I have been looking for. Unfortunately I have virtually no skills in web programming and so I am completely lost as to how to integrate this into a WordPress blog. I am a Science Teacher and my pupils have created ‘Postcards from Planets’ as a homework. I want to scan the front and back sides of each postcard and use this plugin so that visitors to my WordPress powered website can use the hover function to view the front and back of each postcard. Could you (or any of the people who have left comments on here) give me some ideas of how I can do this.

    Many thanks,
    Neil

  61. This is really awesome. Makes me really want to start exploring all the good stuff in JQuery.

  62. leon says:

    What if using the contents with different size(weight or hight)? I tried tab with a long paragraphy,then it happend to be a block of blank when I switched to the tab with less content.

  63. Ben says:

    Jon, your tutorials beat the others. Keep up the good work.

  64. bas says:

    Hi,
    I am trying this out and it works fine with FF, Chrome and Safari. IE8 and IE7 also works fine.

    IE9 does not work.

    Should it run in IE9? I am starting to investigate now…

    Thanks for hints!

  65. bas says:

    I just noticed that it did not work with jQuery 1.4.4, but now with 1.6.1 it works.

  66. Mehmet says:

    I wish, you supported 3D rotation like here http://www.zachstronaut.com/projects/rotate3di/

    the above link does not support ie8,

    you support ie8 but you don’t have 3D rotation?

  67. Arun says:

    Hi Jon,

    I have a requirement like multi flips which may contain 50+ flips depending on the database records. Problem I am facing is that Performance of flip is not supporting same as previous and it keep on decreasing. I am using a single quickFlip div and updating the contents dynamically, as at a time the functionality should show only single div to flip in a popup.

    In this scenario, user can click on any one selection in several options to show up that content in div and further flips the div to continue next formalities based on the selection.

    After 3 or 4 elements selections and further flip is not working good, performace of flip keep on becoming slow, and some times taking time to show that content though flip is not happening.

    My issue similar to what “rene” faced and previously. Can any one please suggest whether any solution to this issue.

  68. eric says:

    I was interested in using this plugin, but the zip file does not see to be valid anymore. I get “the compressed (zipped) Folder … is invalid.” If you are still supporting this plugin, it would be great to have the zip file recreated or to simply post the sourcecode.

    Thanks.

  69. Dicky Dwijayanto says:

    how to make automatic flip , because im too newbie with java script. thanks

  70. PhotoshopWarrior says:

    Well, i have tested it with the newer version 1.6.1 and it works perfectly :) Great jQuery stuff man!!!

  71. michelle says:

    i love this plugin – however it is misbehaving sporadically if i hover too many times – although i don’t know what too many times is – basically i have 2 panels – the first has an anchor with an image and span inside the anchor – when i hover it flips fine – then on later hovers it shrinks the anchor and image to about 10px high from the original 150px – this seems to be quite random – anyone experienced this and know how to fix it – i see that someone else asked the questions early on in the blog comments but i don’t see an answer – thanks michelle

  72. michelle says:

    posted here a couple of days ago but my post not showing. i am having problems with nested content in my div – my content has an anchor inside the div and an image and a span in the anchor – doesn’t work properly at all – i notice someone else asked the question re images and i think i’m having the same problem – can anyone help thanks michelle

  73. Dave Hoot says:

    I am very impressed with the effect and put it into a page which works fine on my desk top but I can’t seem to get it working once put it on line. I want to use this very much, and would appreciate any suggestions.

  74. Gianluca says:

    Hi and thanks for this amazing script. I have a question i would like to have 2 different size panels. I wanted to do it with css, one 30px height the other one 50px, but nothing changed. How can i do it?

  75. mark says:

    Is anyone else here having issues with this plugin in the most up to date version of Chrome? When you mouse over the image it disappears. Even the example on this page seems to have the issue.

  76. Hello.
    when i tried its with IE9, i got any trouble, the jquery for this plugin is not loaded correctly and get several errors, can you give me any tips or advices for this case?
    Thanks

    GTechPedia Association

  77. Srinivasan C says:

    Hi, Very good job. But I have a problem. Some times, some panels are not flip. I unable to find out. Please help me. Pls visit menu on http://www.cottonhousechennai.com/

    Thank you very much

  78. Dhaval says:

    Hello,

    Its nice to use it.

    I have requirement that it work on mouseover (Not on click)

    so simply i do,

    $the_cta.mouseover(function(ev) {
    ev.preventDefault();
    $.quickFlip.flip(i);
    });

    But its constantly flip, so i need it stay as it is when cursor on it.

    when release it should flip.

    Have i got help?

  79. Troy says:

    This is a great plugin.

    Unfortunately it doesn’t seem to play nice with later versions of jquery. I have a DIV with two rounded corners (top-left, bottom-left). The animation seems to chop in half with newer version of jquery.

  80. Milan says:

    Great plugin Jon,
    But i am seeing a major performance hit in V2 which was not in V1
    the div which we flip gets cloned in V2 increasing number of element nodes to double
    which was not happening in V1, is there a way out to avoid this?

  81. Dan Stramer says:

    HI
    How can clicking on a panel close back all other panels?
    What I mean: If i click on panel one then clicking on panel 2 will flip this panel and also flip back panel 1.
    I have 5 panels.

    Thanks,

    Dan

  82. Andrew says:

    what a great plugin, thank you.
    I would like to know if it is possible to target two different flips in one div.
    Basically, on my home div I have 2 links, or more, I would like each link to flip to a different div. Possible?

    thanks again!

  83. Ally says:

    Hey Jon,
    This looks so great on my site. Like a few other commenters above, I am using the hover effect to spin link images and if I hover too much they fly off to the top of the container. I’ve tried adjusting the open/close speed but it still happens. Any suggestions?
    Thanks so much.

  84. Fanzy says:

    Hi Jon, very good plugin.
    I want to know is there any possible that when the mouse move out of the pannel, it flip back to default itself?

  85. Bartolo says:

    I have a problem with submitting ajax, this script won’t work at all with quickFlip:


    $.ajax({
    type: $formId.attr("method"),
    url: $formId.attr("action"),
    data: $formId.serialize(),
    complete: function(){ $('.quickFlip').quickFlipper({}, 4); }
    });

    If I remove quickFlip then everything works fine! Can someone help?? Thank you!

  86. Matt says:

    Hi,

    I’m working on a site where this will be very useful to use for flashcards. I am having an issue though. The site is for learning Chinese characters. The front panel will have the character and the back panel will have the definition. The problem I am having is that I want to show example sentences but only when the back panel is visible. There doesn’t seem to be any callback function. How can I do this?

    Thanks!

  87. Kevin Ferri says:

    Great plugin!
    Just have one question, is there a way to only do one flip? For example, if a user clicked on the image, it would flip to a new image but then if they tried clicking on it again, nothing would happen.

  88. Kevin Ferri says:

    Figured it out. It was very simple, just used unbind.
    Thanks, anyway, and again, great work on the plugin!

  89. Mathew says:

    Hi, if someone knows how to help, please do!
    I want to have my panel flip back over to the front if a certain condition is met:
    if ( $(this).attr('id') != last.attr('id') ) {
    $(this).parent().parent().quickFlipper({}, null, 0);

    However, this just flips it forever. I tried 2 instead of 0 and it still displayed the second panel indexed at 1. If anyone knows what the problem is, please help.
    Thanks.

  90. dll32 says:

    Would be great if I could target divs directly though.

  91. Yih Sheng says:

    HI, this plugin will duplicate our div? my table in the div is duplicated

  92. Callum says:

    Jon, fantastic job. I’m really enjoying this script. I’m new to JQuery and have made some progress customising the function like this: http://jsfiddle.net/sMYzS/74/

    I have a page that shows 6 dynamically created Flip Panels. In the example above you’ll see two. When the user mouse-out(s) from the reverse of one panel I’d like THAT panel to reset to its original state. This code does it, but ALL panels animate on mouse-out. Anyone got a quick fix?


    $(function() {
    $('.quickFlip').quickFlip();
    $('.redPanel').on('mouseleave',function(){
    $('.quickFlip').quickFlipper( {}, 0 );
    });
    });?

    Thank you very much, I think this is more generic JQuery than specific to your code… but let me know either way. I’m new!

    - C.

  93. Anil Koranne says:

    Hi,
    This is very awesome plugin. But when I test this plugin on Ipad/Iphone it gives me a issue on flipping a card after changing the orientation.
    For ex:
    When the page is launch and Flipped once it goes to redpanel DIV and after that when I change the orientation and again click to flip that card it remains in that card only it dosent goes to the blackpanel DIV or we say front card.
    Can you please answer this query why this is happening?
    Thanks in advanced.

  94. Steven says:

    Hi,

    Apologies, but a complete newbie here with very little knowledge of jquery :(
    How would I link to another webpage after the image has flipped?
    Thanks!



Leave a Reply



  • HTML permitted
  • Wrap code in <pre><code></code></pre>
  • Escape HTML to display as text