Ease inOut a whole queue.

For bounty question on Stack Overflow.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<button id="go">Queue</button>
<button id="reset">Reset</button>
<div class="square"></div>

CSS

.square {
    background-color: red;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 150px;
    top: 0px;
}

JavaScript

var counter = 1;

function getPath() {
    var a = Math.pow(-1,counter),
        i = counter % 4,
        j = i > 0 ? i - 1 : 3,
        bezier = {
            start: {
                 y: 150,
                x: counter * 50,
                angle: 30 * a,
                length: .55
            },
            end: {
                y: 150,
                x: counter * 50,
                angle: 30 * a,
                length: .55
            }
        };

    counter++;
    
    return new $.path.bezier(bezier);
}

$("#go").on("click", function () {

    var square = $(".square"),
        queue = square.queue(),
        path = getPath(),
        easing = "linear";

    //if(square.queue().length) {
    //    for(var i = 1, len = queue.length; i < len; i++) {
    //        queue[i].easing = "linear";
    //    }
    //    easing = "easeOutQuad";
    //}
    //else {
    //    easing = "easeInQuad";
    //}

    square.animate({path: path}, {
        duration: 1400,
        easing: easing
    });
});
$("#reset").on("click", function () {
    counter = 1;
    $(".square").stop(true, true).css({
        left: "150px",
        top: "0px"
    });
});





/*
 * jQuery css bezier animation support -- Jonah Fox
 * version 0.0.1
 * Released under the MIT license.
 */
/*
  var path = $.path.bezier({
    start: {x:10, y:10, angle: 20, length: 0.3},
    end:   {x:20, y:30, angle: -20, length: 0.2}
  })
  $("myobj").animate({path: path}, duration)

*/

(function($){

  $.path = {};

  var V = {
    rotate: function(p, degrees) {
      var radians = degrees * Math.PI / 180,
        c = Math.cos(radians),
        s = Math.sin(radians);
      return [c*p[0] - s*p[1], s*p[0] + c*p[1]];
    },
    scale: function(p, n) {
      return [n*p[0], n*p[1]];
    },
    add: function(a, b) {
      return [a[0]+b[0], a[1]+b[1]];
    },
    minus: function(a, b) {
      return [a[0]-b[0], a[1]-b[1]];
    }
  };

  $.path.bezier = function( params, rotate ) {
    params.start = $.extend(...