Tone down jQuery Easing's bounce

I'm using the jQuery Easing plugin and using the bounce easing effect. I like it, but it's so incredibly drastic. I need to tone it down (probably removing a bounce and making the curves less drastic.

I've found this post, but I'm actually not a math major... Can someone help me out in English? I don't even need to fully grasp it, I'd be okay with someone simply providing a function for me.

I know I'm supposed to paste code I've tried, but I don't even know what to try, so I suppose I'll post the easing function provided with the jQuery Easing plugin.

easeOutBounce: function (x, t, b, c, d) {
    if ((t/=d) < (1/2.75)) {
    return c*(7.5625*t*t) + b;
    } else if (t < (2/2.75)) {
    return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
    } else if (t < (2.5/2.75)) {
    return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
    } else {
    return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
    }
}

Your best bet is to find an easing function that's close to what you want and tweak the duration. But if you really want to do something custom, the jQuery easing plugin lets you specify timing using the following function:

jQuery.easing.newEasingMethodName (
    x, // Ignored
    current_time,
    start_value,
    end_value,
    total_time
)

It gets called at various points along the animation, and is expected to return the position appropriate to the elapsed time of the animation. Examining easeOutBounce, you can see that each if statement normalizes the progress as a percentage of the total time (the t/=d snippet), and applies one of 4 forumlae to derive the current value as a function of that percentage.

The problem is that these formulae functions are not continuous--they're individually "tuned" to pick up where the other one leaves off at that precise percentage-of-completion point in the timeline. For example, in the snippet below, if you select "step", you'll see that the animation jumps from position to position with no intervening animation. That's what would happen if you simply take one of the if statements out of the easeOutBounce code block--it would skip from the finish of one step to the beginning of the next, which was tuned to start at a later part of the timeline, and so would cause your animation to jump all over the place.

You can use the custom function below as a starting point--it's just the easeOutBounce function, rewritten to make it a little less obscure.

Good luck. :)

var $div = $('#test');
var $easeMethodName = $('#method-name');
var $animationDuration = $('#animation-duration');

$('button').click(function() {
  $div.toggleClass('expanded');
  var width = $div.hasClass('expanded') ? 400 : 200;
  var duration = parseInt($animationDuration.val(), 10);

  $div.animate({
    width: width
  }, {
    duration: duration,
    easing: $easeMethodName.val()
  });

});

var linear = function(ignore, t, start_value, end_value, d) {
  var pct = t/d;
  return pct * end_value;
};
$.easing.linear = linear;

var step = function(ignore, t, start_value, end_value, d) {
  var pct = t/d * 100;
  var step = Math.round(pct / 25);
  return (step * .25) * end_value + start_value;
};
$.easing.step = step;

// This is the eastOutBounce function, rewritten to make it a little 
// easier to read. Use it as a starting point for modification.
// t is the current time; d is the duration of the animation
var custom = function(ignore, t, start_value, end_value, d) {
  var pct = t/d;
  var step1 = 1/2.75; // ~36%
  var step2 = 2/2.75; // ~73%
  var step3 = 2.5/2.75; // ~90%

  if (pct < step1) {
    return end_value*(7.5625*pct*pct) + start_value;
  } else if (pct < step2) {
    return end_value*(7.5625*(pct-=(1.5/2.75))*pct + .75) + start_value;
  } else if (pct < step3) {
    return end_value*(7.5625*(pct-=(2.25/2.75))*pct + .9375) + start_value;
  } else {
    return end_value*(7.5625*(pct-=(2.625/2.75))*pct + .984375) + start_value;
  }
};
$.easing.custom = custom;

#test {
  width: 200px;
  height: 20px;
  border: 1px solid #900;
  background: #ccc;
  position: relative;
  margin-top: 1em;
}

label, button {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<label>Method name: 
  <select id="method-name">
    <option value="linear">Linear</option><option value="step">Step</option><option value="custom">Custom</option><option value="easeInOutBounce">easeInOutBounce</option>
  </select>
</label>

<label>Duration:
  <input id="animation-duration" value="1000" />
</label>

<button>Animate</button>

<div id="test">
</div>