jQueryのanimateで、移動距離が変わっても速度を一定にする

jQueryのanimateで設定する時間は、現在地から移動先までをミリ秒単位で指定しますが、移動先までの距離が変わると速度も変わってしまいます。
速度を距離が変わっても一定にしたいときがたまにあるので、移動先までの距離に合わせてanimateに設定する時間も変更する方法をメモしておきます。

サンプルコード

必要な箇所のみ抜粋しています。詳細はデモページをご確認ください。

HTML

<div id="sample01" class="contents">
	<button class="btn">実行</button>
	<div class="box01">A</div>
	<div class="box02">B</div>
</div>

<div id="sample02" class="contents">
	<button class="btn">実行</button>
	<div class="box01">A</div>
	<div class="box02">B</div>
</div>

.contents {
	position: relative;

.box01, .box02 {
	position: absolute;
	left: 0;
}

.box01と.box02のleftの値を変えて、移動のアニメーションを行います。

$(function() {
	// AとBの移動先
	var goalA = 300;
	var goalB = 600;

	// ゴールするまでの時間が同じパターンの処理
	$(document).on('click', '#sample01 button', function() {
		$('#sample01 .box01').animate({
			left: goalA
		}, 1000, 'linear');
		$('#sample01 .box02').animate({
			left: goalB
		}, 1000, 'linear');
	});

	// AとBのスタート位置
	var startA = parseFloat($('#sample02 .box01').css('left'));
	var startB = parseFloat($('#sample02 .box02').css('left'));
	// 移動速度の調整。数値を増やすと速度アップ、減らすと速度ダウン
	var baseSpeed = 50;

	// 移動速度が同じパターンの処理
	$(document).on('click', '#sample02 button', function() {
		$('#sample02 .box01').animate({
			left: goalA
		}, Math.abs(startA - goalA) * 100 / baseSpeed, 'linear');
		$('#sample02 .box02').animate({
			left: goalB
		}, Math.abs(startB - goalB) * 100 / baseSpeed, 'linear');
	});
});

デモページはこちら
比較を分かりやすくするためにeasingをlinearにしていますが、linearでなくても問題ありません。

JavaScriptの説明ですが、2～4行目が移動先の指定で、Aがleft: 300px; Bがleft: 600px;まで移動します。
6～14行目が通常のアニメーションで、1秒かけてABそれぞれの移動先まで移動します。

16～18行目でABそれぞれの移動開始位置(left: 0px;)を取得、19～20行目は移動速度調整になります。
22～30行目が移動速度を一定にしたアニメーションで、Math.abs(startA – goalA)で
移動開始位置から移動先位置を引き、Math.abs()で絶対値にしています。
その後の * 100 / baseSpeed は速度を調整しているだけなので、なくても問題はありません。