嘿，这个需求其实不用依赖jQuery，直接用CSS就能完美实现！你想要的easeInSine效果是那种开始缓慢、逐渐加速的动画曲线，我们可以通过修改CSS的transition-timing-function来搞定，分两种情况给你说明：

一、现代浏览器直接用标准缓动函数 #

现在大部分现代浏览器（Chrome 43+、Firefox 52+、Edge 79+等）都支持CSS标准命名的缓动函数，其中ease-in-sine就和jQuery的easeInSine效果完全一致，直接用就行，代码最简洁：

修改你的.a类CSS：

.a {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: red;
  /* 指定transform属性的过渡，加上ease-in-sine缓动 */
  transition: transform 0.4s ease-in-sine;
}

二、兼容旧浏览器用贝塞尔曲线近似值 #

如果需要兼容更老的浏览器，我们可以用cubic-bezier()函数来模拟easeInSine的曲线，对应的近似值是cubic-bezier(0.47, 0, 0.745, 0.715)，把它替换到transition里就行：

.a {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: red;
  /* 兼容旧浏览器的贝塞尔曲线版本 */
  transition: transform 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
}

完整代码示例 #

这里给你整合好的完整代码，JS部分完全不用改，只需要调整CSS的transition属性：

<div class="a"></div>
<button class="button">run</button>

<style>
.a {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: red;
  /* 选上面两种缓动方式的一种就行 */
  transition: transform 0.4s ease-in-sine;
  /* transition: transform 0.4s cubic-bezier(0.47, 0, 0.745, 0.715); */
}

.button {
  margin-left:100px;
}
</style>

<script>
var a = document.querySelector('.a')

document.querySelector('.button').addEventListener('click', function() {
  var ww = window.innerWidth - (window.pageXOffset || document.documentElement.scrollLeft),
      wh = window.innerHeight - (window.pageYOffset || document.documentElement.scrollTop),
      rect = a.getBoundingClientRect(),
      final_left = ww - rect.left - a.offsetWidth,
      final_top = wh - rect.top - a.offsetHeight

  a.style.transform = "translate(" + final_left + "px," + final_top + "px)";
})
</script>

另外提个小建议：尽量不要用transition: all，明确指定要过渡的属性（比如这里的transform），这样动画性能会更好哦！

备注：内容来源于stack exchange，提问作者Toniq