JS flip effect running before AJAX

Question

Running JS (see below) to generate a flip effect when user clicks submit button (class .form-submit) on an AJAX form (see below). Unfortunately, quickFlip.init(); is running before the AJAX meaning the flip occurs but the form data isn't sent. How can we solve this?

Form we are using...

<div style="display: block;" class="quickFlipPanel panel2">
  <div class="panelInner">
    <h2>Feeds (edit)</h2>
    <div class="view-filters">
      <form class="views-processed" action="/intranet.intra/" accept-charset="UTF-8" method="get" id="views-exposed-form-user-feeds-block-1">
        <div>
          <div class="views-exposed-form">
            <div class="views-exposed-widgets clear-block">
              <div class="views-exposed-widget">
                <label for="edit-cid"> Category </label>
                <div class="views-widget">
                  <div class="form-checkboxes bef-select-as-checkboxes ">
                    <div class="bef-checkboxes">
                      <div class="form-item" id="edit-cid-2-wrapper">
                        <label class="option" for="edit-cid-2">
                          <input name="cid[]" id="edit-cid-2" value="2" type="checkbox">
                          Business</label>
                      </div>
                      <div class="form-item" id="edit-cid-1-wrapper">
                        <label class="option" for="edit-cid-1">
                          <input name="cid[]" id="edit-cid-1" value="1" checked="checked" type="checkbox">
                          News</label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="views-exposed-widget">
                <input id="edit-submit-user-feeds" value="Apply" class="form-submit" type="submit">
              </div>
            </div>
          </div>
        </div>
        <input name="view_name" value="user_feeds" type="hidden">
        <input name="view_display_id" value="block_1" type="hidden">
        <input name="view_args" value="" type="hidden">
        <input name="view_path" value="homebox/1" type="hidden">
        <input name="view_base_path" value="null" type="hidden">
        <input name="view_dom_id" value="2" type="hidden">
        <input name="pager_element" value="0" type="hidden">
      </form>
    </div>
  </div>
</div>
<!-- /panel2 -->

JS we are using...

    /**
 * QuickFlip jQuery Plugin 0.1
 *
 * Author: Jon Raasch @ [email protected]
 *
 * http://jonraasch.com/blog/quickflip-jquery-plugin
 */

var quickFlip = {
  wrappers: [],
  newPanel: [],
  oldPanel: [],
  speed: [180, 120],
  createFlip: function (x, y, width) {
    var out = '';
    for (z = 0; z < 2; z++) {
      var theClass = (z == 0) ? 'flipColL' : 'flipColR';
      var thePos = (z == 0) ? 'right' : 'left';
      out += '<div class="' + theClass + '" style="width: ' + width + 'px; height: ' + x.height + '; ' + thePos + ': ' + x.halfwidth + 'px;"><div class="' + x.classNames[y] + '">' + x.panels[y].html() + '</div></div>'
    }
    return out;
  },
  flip: function (i, j, repeater) {
    var x = quickFlip.wrappers[i];
    var k = (x.panels.length > j + 1) ? j + 1 : 0;
    quickFlip.newPanel = Array(i, k);
    quickFlip.oldPanel = Array(i, j);
    var flipDiv = quickFlip.createFlip(x, j, x.halfwidth);
    var flipDiv2 = quickFlip.createFlip(x, k, 0);
    x.panels[j].hide()
    x.wrapper.append(flipDiv);
    var $panel1 = $('.flipColL, .flipColR', x.wrapper);
    var count1 = 0;
    var count2 = 0;
    var speed = (typeof(x.speed) == 'undefined') ? quickFlip.speed : x.speed
    $panel1.animate({
      width: 0
    }, speed[0], function () {
      if (!count1) count1++;
      else {
        $panel1.remove();
        x.wrapper.append(flipDiv2);
        var $panel2 = $('.flipColL, .flipColR', x.wrapper);
        $panel2.animate({
          width: x.halfwidth
        }, speed[1], function () {
          if (!count2) count2++;
          else {
            $panel2.remove();
            x.panels[k].show();
            switch (repeater) {
            case -1:
              quickFlip.flip(i, k, -1);
              break;
            case 1:
              if ($.browser.msie) {
                if (typeof(quickFlip.reattachEvents) == 'function') quickFlip.reattachEvents();
                quickFlip.attachHandlers($('.form-submit', x.panels[k]), i, k);
              }
              break;
            default:
              quickFlip.flip(i, k, repeater - 1);
              break;
            }
          }
        });
      }
    });
  },
  attachHandlers: function ($the_cta, i, panel) {
    $the_cta.click(function (ev) {
      ev.preventDefault();
      quickFlip.flip(i, panel, 1);
    });
  },
  init: function () {
    quickFlip.wrappers = new Array();
    $('.quickFlip').each(function (i) {
      var $this = $(this);
      var thisFlip = {
        wrapper: $this,
        halfwidth: parseInt(parseInt($this.css('width')) / 2),
        height: $this.css('height'),
        classNames: [],
        panels: []
      };
      $this.children('.quickFlipPanel').each(function (j) {
        var $thisPanel = $(this);
        thisFlip.panels.push($thisPanel);
        thisFlip.classNames.push($thisPanel[0].className);
        quickFlip.attachHandlers($('.form-submit', $thisPanel), i, j);
        if (j) $thisPanel.hide();
      });
      quickFlip.wrappers.push(thisFlip);
    });
  }
}

$(function () {
  quickFlip.init();
});