如何为可拖动动画设置动画并继续滑动？

Question

我想为一个类似于google正在使用的移动网站构建一个水平导航栏。

导航是使用可拖动的jquery UI构建的，其导航元素包含在div中并沿x轴对齐。

现在，要使它具有流畅的体验，我希望一旦用户停止拖动，动作就可以继续。就像滚动事件一样。现在，它会停在用户放下的位置，这与google移动网站上的示例有所不同，拖动将继续并保持平稳。

放置元素后如何为拖动设置动画？

var nav = $('nav');

nav.draggable({
  axis: "x",
  containment: 'draggable',
  distance: 10
});

navWidth = 0;
$('nav a').each(function(index) {
  navWidth += parseInt($(this).width(), 10) - 20;
});

nav.on("drag", function(event, ui) {
  if (ui.offset.left > 0) {
    ui.position.left = 0;
  }

  if (ui.position.left < navWidth - nav[0].scrollWidth) {
    ui.position.left = navWidth - nav[0].scrollWidth - 5;
  }
});

nav {
  display: flex;
  flex-direction: row
}
nav div {
  height: 32px;
  padding: 0 10px
}
.draggable {
  width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
 border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="draggable">
  <nav class="ui-draggable ui-draggable-handle" style="position: relative;">

    <div class="selected">
      <a href="/test/" id="nav_test" class="selected ui-link" data-ajax="false">test</a>
    </div>
    <div class="">
      <a href="/second/" id="nav_second" class="ui-link" data-ajax="false">second</a>
    </div>
        <div class="">
      <a href="/third/" id="nav_second" class="ui-link" data-ajax="false">third</a>
    </div>

  </nav>
</div>